Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between width and device-width in CSS media queries

What is the difference (in simple terms) between height and width and device-width and device-height?

like image 465
sIla Avatar asked Apr 19 '11 12:04

sIla


People also ask

What is device width in media query?

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”.

What is device width in CSS?

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.

What is the difference between max device width and max width?

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.

What is width device width?

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.


1 Answers

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.

like image 128
alex Avatar answered Sep 24 '22 03:09

alex