Menu
I need to develop some html pages for iphone/android phones, but what is the difference between max-device-width and max-width? I need to use different css for different screen size.
@media all and (max-device-width: 400px)
@media all and (max-width: 400px)
What's the difference?
784
Mobile (Smartphone) max-width: 480px.
Most mobile phones have a device-width of 480px or lower, including the popular iPhone 4 (with device-width: 320px), despite it technically having a 640 x 960 resolution. This is due to iPhone 4's retina display, which crams two device pixels into each CSS pixel on the screen.
This is a simple way to put it: if the element would render wider than the max-width says it should be, then the max-width property wins over the width property. But if it would render less than the max-width says, then the width property wins. In mathematical terms: if width > max-width; let the browser use max-width.
All you are essentially interested in is the width of the viewport no matter the device. However the main difference between width and device-width is that device-widths don't always match the layout viewport of said device. Many tablets and mobile devices don't always have 1 device pixel per CSS pixel.
max-width is the width of the target display area, e.g. the browser
max-device-width is the width of the device's entire rendering area, i.e. the actual device screen
Same goes for max-height and max-device-height naturally.
266
max-width refers to the width of the viewport and can be used to target specific sizes or orientations in conjunction with max-height. Using multiple max-width (or min-width) conditions you could change the page styling as the browser is resized or the orientation changes on a device like an iPhone.
max-device-width refers to the viewport size of the device regardless of orientation, current scale or resizing. This will not change on a device so cannot be used to switch style sheets or CSS directives as the screen is rotated or resized.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
