设备宽度和设备高度在桌面浏览器中不能正常工作吗？

Question

Im trying to experiment with device-width and device-height with my desktop and browser to distinguish to what extent does the property works and differences with the width when it comes to desktop browsers.

For some reason a simple code like this isnt very responsive with desktop browsers particulary firefox. @media screen and (max-device-width: 500px){ body{ background-color: green; } } @media screen and (min-device-width: 501px){ body{ background-color: red; } }

then i tried resizing the browser only first declaration is being applied and turning to green?

anyone know why this is happening? specifically does device-width and device-specific properties only work with mobile devices only and not desktop browsers?

Answer 1

device-width refers to the width of the device itself (or the device's screen resolution) and is most commonly used for targeting specific mobile devices where browsers are not resized. device-width can be used to target laptops as well usually with widths from 1200-1600px.

width refers to the width of the browser window (responsive to resizing).

Check out this link for the media queries for common devices: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Hope this helps!