CSS İpucu 22: iPhone için CSS Yazmak
Geliş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.
[...] bellidir. iPhone‘larda görünecek siteler için Fatih Hayrioğlu‘nun CSS İpucu 22: iPhone için CSS Yazmak başlıklı yazısındaki gibi 480px genişliği sabit [...]
[...] ekran çözünürlüğü bellidir. iPhone‘larda görünecek siteler için Fatih Hayrioğlu‘nun CSS İpucu 22: iPhone için CSS Yazmak başlıklı yazısındaki gibi 480px genişliği sabit [...]
hocam ifon için bi başlık açıyorsunuz konuyu eksik anlatıyorsun…
dosyayı import ettik. sonra başka tarayıcılar dahil safari de ekran görnümünü nasıl sağlarız. ben uyguladım olmadı. bazı konular için bi sayfa yapıp css ve ugyulama sayfası yapıyorsunuz deneme yaparsanız memnun olurum.
ayrıyetten zorululuğun da yok yanlış anlama.
Kodda bir sorun yok medya sorgusu dışına yazdığınız kodu diğer tarayıcılar görecektir.
[...] çözünürlüğü bellidir. iPhone‘larda görünecek siteler için Fatih Hayrioğlu‘nun CSS İpucu 22: iPhone için CSS Yazmak başlıklı yazısındaki gibi 480px genişliği sabit [...]
iphone 'um olmadığı için yaptığım sayfanın iphone da nasıl yapabilirim?
eğer mac kullanıyorsanız xcode programının iphone simulator ü var oradan test edebilirsiniz. Windows ta safari kurup, onda test edebilirsiniz ama gerçeği ile farklı yanlar çıkabilir
Likit sayfalar da bu sorunu çözer sanırım. Yanılıyor muyum hocam
merhaba hocam iphone uymlu hazır bir proje elinizde mevcut isie benimle paylaşabilirmisniz
zamanında bonus için bir site yapmıştım http://iphone.bonus.com.tr
Hocam bağlantıda sorun var herhalde….. Bir de rica etsem ben mobil web ile ilgili dökümanlar varsa elinizde ve de yaptıgınız projeler bizimle paylaşırmısınız.. Şimdiden teşekkür ederim hocam..
Bağlantıyı düzelttim. Pek bi doküman olduğunu söyliyemem http://cssiphone.com/ buradaki siteleri inceleyin
Merhaba hocam, burada <!–[if !IE]>–> seklinde bir kod eklenmis fakat bu sekilde internet explorer olmayan tarayicilari hedefliyoruz. iPhone browser icin bir secici varmi?
iPhone ile siteye girip Google Analytics 'ten baktigimda browser olarak Opera Mini 4 olarak bilgi veriyor.
Bu kodlarsadece ie de geçerli iphone için http://www.fatihhayrioglu.com/css-ipucu-21-iphone… göz atın
Hocam baglatida bir sorun var sanirim.
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.
Yani iphone max. genişliği 480px mi?
Bundan sonra ne yapılacak peki normal web sayfası gibi devammı edeceğiz?
Evet kodlarımızı yazmaya başlıyoruz. Bu kadar. Tabi iphone safari desteklediği kodlara da dikkat etmke lazım http://www.evotech.net/blog/2007/04/css-selectors-and-browser-support/
Evet kodlarımızı yazmaya başlıyoruz. Bu kadar. Tabi iphne safari desteklediği kodlara da dikkat etmke lazım http://www.evotech.net/blog/2007/07/safari-30-css… ve http://www.evotech.net/blog/2007/04/css-selectors…