iPhone 5 CSS medya sorgusu

İPhone 5 daha uzun bir ekrana sahip ve web sitemin mobil görünümünü yakalamıyor. İPhone 5 için yeni duyarlı tasarım sorguları nelerdir ve mevcut iPhone sorgularıyla birleştirebilir miyim?

Mevcut medya sorgum şudur:

@media only screen and (max-device-width: 480px) {}

Bir başka kullanışlı medya özelliği de device-aspect-ratio.

O Not 9 en boy oranı: iPhone 5 16 bulunmamaktadır . Aslında 40:71.

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iphone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Referans:
Medya Sorguları @ W3C
iPhone Modeli Karşılaştırması
En Boy Oranı Hesaplayıcı

Bu bloga kredi verdiğim bir şey var :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Söz konusu cihazda yüklü belirli iOS sürümüne değil, iPhone 5'e tepki verdiğini unutmayın.

Mevcut sürümünüzle birleştirmek için, onları virgülle sınırlandırabilmeniz gerekir:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

Not: Yukarıdaki kodu test etmedim, ancak daha önce virgülle ayrılmış @mediasorguları test ettim ve gayet iyi çalışıyorlar.

Yukarıdakilerin, Galaxy Nexus gibi benzer oranları paylaşan bazı diğer cihazlara çarpabileceğini unutmayın. Burada, yalnızca bir boyutu 640 piksel (bazı tuhaf ekran piksel anormallikleri nedeniyle 560 piksel) ve 960 piksel (iPhone <5) ile 1136 piksel (iPhone 5) arasında olan cihazları hedefleyen ek bir yöntem verilmiştir.

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

Medya sorgularını kullanan max-device-widthveya max-device-heightmedya sorguları için yukarıda listelenen tüm bu cevaplar çok güçlü bir hatadan muzdariptir: aynı zamanda diğer birçok popüler mobil cihazı da hedefler (muhtemelen istenmeyen ve hiç test edilmemiş veya gelecekte piyasaya çıkacak).

Bu sorgular daha küçük ekrana sahip herhangi bir cihaz için çalışacak ve muhtemelen tasarımınız bozulacaktır.

Cihaza özgü benzer medya sorgularıyla (HTC, Samsung, IPod, Nexus ... için) birleştirildiğinde bu uygulama bir saatli bomba başlatacaktır. Hata ayıklama için bu fikir, CSS'nizi kontrolsüz bir spagetti yapabilir. Olası tüm cihazları asla test edemezsiniz.

Lütfen her zaman IPhone5'i hedefleyen ve başka hiçbir şeyi hedeflemeyen tek medya sorgusunun :

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Burada maksimum genişliğin değil , tam genişlik ve yüksekliğin işaretlendiğini unutmayın.

Şimdi, çözüm nedir? Olası tüm cihazlarda iyi görünecek bir web sayfası yazmak istiyorsanız, sizin için en iyi uygulama, kaliteyi düşürmektir.

/ * bozulma kalıbı sadece ekran genişliğini kontrol ediyoruz, bu değişecek, dikeyden yataya dönüyor * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

Web sitenizin ziyaretçilerinin% 30'undan fazlası mobil cihazlardan geliyorsa, mobil cihazlara öncelik veren bir yaklaşım sağlayarak bu planı ters çevirin. min-device-widthBu durumda kullanın . Bu, mobil tarayıcılar için web sayfası oluşturmayı hızlandıracaktır.

benim için işi yapan sorgu şuydu:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

Dikey ve yatay modda iPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

Yatay durumda iPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

Dikey iPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Yanıtların hiçbiri benim için bir phonegapp uygulamasını hedeflerken işe yaramıyor.

Aşağıdaki bağlantı noktaları gibi, aşağıdaki çözüm işe yarar.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

Birkaç seçeneği test ettiğim ve bunu yol boyunca kaçırdığım için çok hızlı bir ekleme. Sayfanızın aşağıdakilere sahip olduğundan emin olun:

<meta name="viewport" content="initial-scale=1.0">

Mobil cihazlar için medya özelliği veritabanındaki diğer akıllı telefonların yanı sıra iPhone5 için yanıtınızı oldukça kolay bir şekilde alabilirsiniz:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Hatta aynı web sitesindeki test sayfasında kendi cihaz değerlerinizi bile alabilirsiniz.

(Sorumluluk reddi: Bu benim web sitem)

afaik hiçbir iPhone 1,5 piksel oranı kullanmaz

iPhone 3G / 3GS: (-webkit-cihaz-piksel-oranı: 1) iPhone 4G / 4GS / 5G: (-webkit-cihaz-piksel-oranı: 2)

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

Tüm iPhone'ları yakalamak için "-webkit-min-device-piksel-oranını" 1,5'e düşürmeniz gerekir mi?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}