CSS İpucu 22: iPhone için CSS Yazmak

apple-iphoneGelişen ve yaygınlaşan mobil cihazlar bizlere bir mecra daha açacağa benziyor. Gelecekte etkisini daha çok hissettirecek cep telefonu vb. ürünlerden internete girme isteği. Şimdilerde kendini gösteriyor. Benim size burada bahsedeceğim ipucu küçük ama kullanışlı bir ipucu olacaktır.

Bir kaç sitede gördükten sonra ve bende bir iphone projesine başlayacak olmamdan dolayı buraya eklemeyi uygun gördüm. Daha önce çıktı almak için(print) benzer bir yapıyı kullanmıştık.

Kodumuz çok basit

<!--[if !IE]>–>
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
<!–<![endif]–>

veyahut

@media only screen and (max-device-width: 480px) {
  body {color:#000;}
}

şeklinde bir tanımlamada yapabiliyoruz. İlk koddaki ie şartlı koşulu bazı eski ie sürümlerinde bu kodu algılama durumu içindir.

Yukarıdaki tanımlar sadece iPhone’da görünecektir. İşin püf noktasını max-device-width: 480px kısmı oluşturuyor.

Kaynaklar

22 Yorum (Yorum Ekle)

  • W3C diyor ki:

    iphone için bu koşulu girdikten sonra yine ister kendi css dosyalarını import et ister <style> etiketiyle her zamanki gibi css kod yaz.
    yani o verilen kodu ekleyerek iphone için siteni optimize etmiş oluyorsun.

  • Yunus diyor ki:

    Yani iphone max. genişliği 480px mi?
    Bundan sonra ne yapılacak peki normal web sayfası gibi devammı edeceğiz?

  • Yorum yaz

    Format: Yorum içinde kullanılabilecek HTML kodları: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    ?