Web Apps – Viewport Display Pixels vs. Device Pixels – 2 Types of Pixels



Device pixels versus Display pixels


Device pixels are the actual physical dots that the device screen can display.  On the iPhone, this is 1136 x 640 (which one is width depends on how you’re holding the device).


A display pixel, also known as a device-independent pixel, a point, or a dot, is what the browser uses to display webpages.  It is also what you’re using when you specify dimensions in CSS.


Depending on the zoom level, a device independent pixel may be larger or smaller than a device pixel.  You can use a ratio to show the zoom level.  For example, if you zoom in to double the size of the content, the ratio of device-independent pixels to device pixels is 2:1 (two to one).  In other words, display pixels are twice the size of device pixels.


You can control the size of display pixels by controlling the width of the viewport.  You do this using the viewport meta tag.  On iOS, the mobile Safari browser uses a default value of 980 points wide in either landscape or portrait mode.  In landscape mode, the browser zooms in on the page a bit to take advantage of the larger width.  The viewport size remains the same.

This 980-point-wide viewport works great if you’ve designed your site to be 980 pixels wide and your fonts are readable on a small screen.  More often, what you see by default on iOS looks great.  However, if you design your Web app to be 320 pixels wide in portrait mode, with the default viewport width (which is 980), your app won’t look good and will only take up about a third of the viewport.

To display your webpage as large as possible in mobile browsers, and to take into account that different devices have different scene sizes, you need to set the viewport equal to the width of the device screen.  You can do this with the simple Viewport HTML meta tag:

<meta name=”viewport” content=”width=device-width, initial scale=1.0″>

This tag sets the width of your viewport to the width of the device, rather than 980 points, and sets the initial scaling of your viewport to 1 – meaning that it won’t be zoomed in.

The viewport meta tag has a couple of other, less frequently used properties that you might want to know about:

  • height:  This specifies the height of the viewport.  It doesn’t really do anything and is not usually used.

  • minimum-scale:  This is the minimum amount the user can zoom out to.  On mobile Safari, it as a default value of .25, meaning that users can view content at one-quarter of the actual size.

  • maximum-scale:  Is the maximum amount the user can zoom in.  The default on mobile Safari is 1.6.

  • user-scalable:  This property has a value of yes or no.  If it’s set to no, the user won’t be able to zoom.

I hope this helps explain how pixels are viewed and used in developing Web apps.  Thanks for reading!