Mobil web için maksimum cihaz genişliği ile maksimum genişlik arasındaki fark nedir?

İphone / android telefonlar için bazı html sayfaları geliştirmem gerekiyor, ancak max-device-widthve arasındaki fark max-widthnedir? Farklı ekran boyutu için farklı css kullanmam gerekiyor.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

Fark ne?

max-width hedef görüntüleme alanının genişliği, örneğin tarayıcı

max-device-width cihazın tüm oluşturma alanının genişliği, yani gerçek cihaz ekranı

Aynı için de geçerli max-heightve max-device-heightdoğal olarak.

max-width"Vizör", görünüm penceresinin genişliğini ifade eder ve ile birlikte belirli boyutları veya yönlendirmeleri hedeflemek için kullanılabilir max-height. Birden çok max-width(veya min-width) koşul kullanarak , tarayıcı yeniden boyutlandırıldığında veya iPhone gibi bir cihazdaki yön değiştikçe sayfa stilini değiştirebilirsiniz.

max-device-width"Yön", oryantasyon, mevcut ölçek veya yeniden boyutlandırmadan bağımsız olarak cihazın görüntü alanı boyutunu belirtir. Bu bir cihazda değişmez, bu nedenle ekran döndürüldüğünde veya yeniden boyutlandırıldığı için stil sayfalarını veya CSS yönergelerini değiştirmek için kullanılamaz.

Bu stili kullanmak hakkında ne düşünüyorsun?

Çoğunlukla "mobil cihaz" için olan tüm kesme noktaları için min(max)-device-widthve çoğunlukla "masaüstü" kullanım için olan kesme noktaları için min(max)-width.

Genişliği kötü hesaplayan birçok "mobil cihaz" vardır.

Http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml adresine bakın :

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

max-device-width aygıt oluşturma genişliği

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

Maksimum genişlik, hedef görüntüleme alanının genişliğidir ve geçerli tarayıcı boyutu anlamına gelir.

fark, maksimum cihaz genişliğinin tüm ekran genişliğidir ve maksimum genişlik tarayıcı tarafından sayfaları göstermek için kullanılan alan anlamına gelir. Ancak bir başka önemli fark, android tarayıcıların desteğidir, aslında u maksimum cihaz genişliği kullanacaksanız, bu sadece Opera'da çalışacaktır, bunun yerine maksimum genişliğin her türlü mobil tarayıcı için çalışacağından eminim ( Chrome, firefox ve opera'da ANDROID için test ettim).

maksimum genişlik , hedef görüntüleme alanının genişliğidir, örneğin tarayıcı; Maksimum aygıt genişliği cihazın tüm oluşturma alanının genişliği, yani gerçek cihaz ekranıdır.

• Maksimum aygıt genişliği kullanıyorsanız , masaüstünüzdeki tarayıcı penceresinin boyutunu değiştirdiğinizde, CSS stili farklı ortam sorgusu ayarına değişmez;

• Maksimum genişliği kullanıyorsanız, masaüstünüzdeki tarayıcının boyutunu değiştirdiğinizde, CSS farklı ortam sorgusu ayarına dönüşür ve dokunma dostu menüler gibi cep telefonları için stil ile gösterilebilir.

Bir platformlar arası uygulama (ör. Phonegap / cordova kullanarak) yapıyorsanız,

Cihaz genişliği veya cihaz yüksekliği kullanmayın. Android cihaz cihaz genişliği veya cihaz yüksekliği ile ilgili sorunlar vereceğinden, CSS medya sorgularında genişlik veya yükseklik kullanın. İOS için iyi çalışıyor. Yalnızca android cihazlar cihaz genişliği / cihaz yüksekliğini desteklemez.

Artık cihaz genişliği / yüksekliğini kullanmayın.

cihaz genişliği, cihaz yüksekliği ve cihaz en boy oranı Medya Sorguları Düzey 4'te kullanımdan kaldırılmıştır: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Belirli cihazları hedeflemek için genişlik / yüksekliği (min / maks olmadan) yön ve (min / maks-) çözünürlükle birlikte kullanmanız yeterlidir. Mobil genişlikte / yükseklik, cihaz genişliği / yüksekliği ile aynı olmalıdır.