Why does my mobile browser seems wrong pixels? What is viewport? And how can I use of meta tag?

sample of wrong sizes in pixels
sample of wrong sizes in pixels

Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space. This is done because many pages are not mobile optimized, and break (or at least look bad) when rendered at a small viewport width.

viewport

The browser’s viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.

width of the page vs the device

layout viewport is the area (in CSS pixels) that the browser uses to calculate the dimensions of elements with percentual width, such as div.sidebar {width: 20%}. It’s usually quite a bit larger than the device screen: 980px on the iPhone, 850px on Opera, 800 on Android, etc.

layout viewport

To mitigate this problem of virtual viewport on narrow screen devices, Apple introduced the “viewport meta tag” in Safari iOS to let web developers control the viewport’s size and scale.

<meta name=”viewport” content=”width=device-width, initial-scale=1">

<meta name="viewport" width="device-width"> tag (reliable) & device-width media query work with device pixels, and not with CSS pixels.

without viewport meta tag vs with it

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out. When you add it, the layout viewport is contracted (to 320px in the case of the iPhone), and the text fits.

This article is just summary of two below sources, just for skim reading.

Sources:

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store