virsir virsir - 5 months ago 8
CSS Question

What is the difference between max-device-width and max-width for mobile web?

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?

Answer

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.

Comments