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

Question

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 diffe

Answer 1

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.

• If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;

• If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.