CSS Media Queries Width vs Viewport
Example
When we are using "width" with media queries it is important to set the meta tag correctly. Basic meta tag looks like this and it needs to be put inside the <head> tag.
<meta name="viewport" content="width=device-width,initial-scale=1">
Why this is important?
Based on MDN's definition "width" is
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).
What does that mean?
View-port is the width of the device itself. If your screen resolution says the resolution is 1280 x 720, your view-port width is "1280px".
More often many devices allocate different pixel amount to display one pixel. For an example iPhone 6 Plus has 1242 x 2208 resolution. But the actual viewport-width and viewport-height is 414 x 736. That means 3 pixels are used to create 1 pixel.
But if you did not set the meta tag correctly it will try to show your webpage with its native resolution which results in a zoomed out view (smaller texts and images).
