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


242

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?



1
Saya telah menemukan bahwa itu max-device-widthberfungsi bahkan jika <meta name="viewport" ...>tag tidak termasuk untuk perangkat layar kecil dan max-widthtidak bekerja tanpa metatag
Faizan Akram Dar

Jawaban:


252

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.


15
Jika Anda ingin melihat perubahan saat mengubah ukuran browser Anda, gunakan max-width untuk pengembangan, meskipun max-device-width lebih akurat untuk produksi.
John Magnolia

31
@ JohnMagnolia Apa yang membuat Anda berpikir bahwa max-device-width lebih baik untuk produksi? Bukankah max-width menjamin respons yang lebih baik, apa pun perangkatnya?
e_known

8
@tepat saya setuju. Pengguna dari seluruh spektrum keterampilan / pengetahuan tidak selalu memaksimalkan jendela browser desktop mereka (tapi saya belum melihat tablet atau ponsel yang memiliki browser TIDAK dibuka maksimal - saya kira itu mungkin dalam aplikasi hybrid, tapi itu mungkin adalah kasus yang berbeda). Max-width pasti akan lebih universal.
Jason

2
@tak tahu saya tidak setuju. Bergantung pada gaya Anda, Anda mungkin memiliki tampilan yang sangat berbeda setelah mengenai breakpoint media dan jika Anda memuat stylesheet berdasarkan breakpoint media, itu bisa sangat menggelisahkan bagi situs untuk mengambil tampilan yang sama sekali berbeda ketika mengubah ukuran jendela browser.
TwinPrimesAreEz

2
Jika Anda memiliki tata letak yang sangat berbeda untuk perangkat seluler, kemungkinan alasan mendasarnya adalah karena tidak ada kursor mouse (mereka membutuhkan tombol yang lebih besar dan satu kolom untuk menggulir). Kueri media yang bagus untuk digunakan dalam hal ini adalah @media screen and (pointer: coarse) and (hover: none)yang akan beralih ke versi seluler terlepas dari berapa banyak piksel perangkat seluler yang dimasukkan ke layar mereka di masa mendatang.
EoghanM

81

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.


11
Jawaban ini membuatnya "klik" untuk saya lebih baik daripada jawaban yang diterima. Kedengarannya seperti untuk sebagian besar aplikasi, max-widthdan max-heightakan menjadi yang akan digunakan.
hotshot309

2
@JackieChiles membuat poin bagus di utas SO lainnya yang harus dipertimbangkan (mengenai gaya seluler yang muncul di perangkat yang lebih besar): stackoverflow.com/questions/8564752/…
hotshot309

5
Jawaban yang bagus ini tidak lengkap: orientasi menukar lebar perangkat dan tinggi perangkat di Android tetapi tidak iOS: lihat quirksmode.org/blog/archives/2010/04/the_orientation.html .

16

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

Tidak menjawab pertanyaan dan sebenarnya cara yang buruk untuk bekerja di breakpoints Anda - Hati-hati.
Empat puluh

8

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.


2
@media semua dan (maks-lebar: 400px) {} Apa bedanya
virsir

5

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).


5

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.


3

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.


2

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.


Item polos "device-xxx" sudah usang, item "max-device-xxx" TIDAK ditinggalkan.
Roger Krueger

1
@RogerKrueger Anda yakin tentang itu? Saya tidak melihat apa pun yang mengindikasikan bahwa kueri media max-device-xxx tidak ditinggalkan.
Jonny Cook
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.