Apa perbedaan antara max-device-width dan max-width untuk web seluler?

Saya perlu mengembangkan beberapa halaman html untuk ponsel iphone / android, tetapi apa perbedaan antara max-device-widthdan max-width? Saya perlu menggunakan css yang berbeda untuk ukuran layar yang berbeda.

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

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

Apa bedanya?

max-width adalah lebar area tampilan target, mis. browser

max-device-width adalah lebar seluruh area render perangkat, yaitu layar perangkat yang sebenarnya

Sama berlaku untuk max-heightdan max-device-heightsecara alami.

max-widthmengacu pada lebar viewport dan dapat digunakan untuk menargetkan ukuran atau orientasi tertentu bersamaan dengan max-height. Menggunakan beberapa max-width(atau min-width) kondisi Anda dapat mengubah gaya halaman saat browser diubah ukurannya atau orientasi berubah pada perangkat seperti iPhone.

max-device-widthmengacu pada ukuran area pandang perangkat tanpa memandang orientasi, skala saat ini, atau ukurannya. Ini tidak akan berubah pada perangkat sehingga tidak dapat digunakan untuk mengganti style sheet atau arahan CSS saat layar diputar atau diubah ukurannya.

Apa pendapat Anda tentang penggunaan gaya ini?

Untuk semua breakpoint yang sebagian besar untuk "perangkat seluler" yang saya gunakan min(max)-device-widthdan untuk breakpoint yang sebagian besar untuk penggunaan "desktop" min(max)-width.

Ada banyak "perangkat seluler" yang menghitung lebar dengan buruk.

Lihatlah http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml :

/* #### 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 adalah lebar rendering perangkat

@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 */
}

Lebar maks adalah lebar area tampilan target berarti ukuran browser saat ini.

perbedaannya adalah bahwa lebar perangkat maksimal adalah lebar layar dan lebar maks berarti ruang yang digunakan oleh browser untuk menampilkan halaman. Tetapi perbedaan penting lainnya adalah dukungan browser android, sebenarnya jika Anda akan menggunakan max-device-width ini hanya akan berfungsi di Opera, sebagai gantinya saya yakin bahwa max-width akan bekerja untuk setiap jenis browser ponsel ( Saya telah mengujinya di Chrome, firefox dan opera untuk ANDROID).

max-width adalah lebar area tampilan target, misalnya browser; max-device-width adalah lebar seluruh area render perangkat, yaitu layar perangkat yang sebenarnya.

• Jika Anda menggunakan lebar perangkat maksimal , ketika Anda mengubah ukuran jendela browser di desktop Anda, gaya CSS tidak akan berubah ke pengaturan kueri media yang berbeda;

• Jika Anda menggunakan max-width , ketika Anda mengubah ukuran browser di desktop Anda, CSS akan berubah ke pengaturan kueri media yang berbeda dan Anda mungkin ditampilkan dengan styling untuk ponsel, seperti menu yang ramah sentuhan.

Jika Anda membuat aplikasi lintas platform (mis. Menggunakan phonegap / cordova),

Jangan gunakan lebar perangkat atau tinggi perangkat. Alih-alih menggunakan lebar atau tinggi dalam kueri media CSS karena perangkat Android akan memberikan masalah dalam lebar perangkat atau tinggi perangkat. Untuk iOS berfungsi dengan baik. Hanya perangkat android yang tidak mendukung tinggi perangkat / tinggi perangkat.

Jangan gunakan lebar / tinggi perangkat lagi.

lebar perangkat, tinggi perangkat, dan rasio aspek perangkat tidak digunakan lagi di Media Query Level 4: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Cukup gunakan lebar / tinggi (tanpa min / maks) dalam kombinasi dengan orientasi & (min / maks) resolusi untuk menargetkan perangkat tertentu. Pada lebar / tinggi ponsel harus sama dengan lebar / tinggi perangkat.