What is the difference (in simple terms) between height and width and device-width and device-height?
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer). And following is MDN's definition of “device-width”.
device-width refers to the width of the device itself, in other words, the screen resolution of the device. Lets say your screen's resolution is 1440 x 900. This means the screen is 1440 pixels across, so it has a device-width of 1440px.
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.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
device-width
is the...
width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Source.
The width
...
describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer)
Source.
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