Desktop Site and the Viewport

The viewport came and gave web developers a way to determine the best way to support mobile devices.

But what exactly happens when you define a viewport width and initial scale for a desktop site?

It’s hard to visualise what the result is of twiddling the initial-scale value, so here it is for your very eyes (and my own memory / sanity).

Firstly let’s consider the devices:

Nexus 5

  Physical Pixels CSS Pixels Screen Density

Width 1080 360 3

Height 1920 640  

Nexus 10

  Physical Pixels CSS Pixels Screen Density

Width 2560 1280 2

Height 1600 800   Let’s say we have a site which has been designed for a width of 640px, how does that look across mobile devices?

On desktop we’ll get a view like the image below, where the blue section is an element with a hardcoded width of 640px and we’ve centered an image within that with a width of 320px and height of 320px.

This viewport will tell devices that the page is designed for 640px and since there is no initial-scale, the user agent will fit the 640px width to the devices width.

You can regard this as the browser setting the initial-scale to a value where the content will fit the screen exactly (i.e. zoom in or zoom out such that the entire width of the site can be viewed).

For our site with a width of 640px and a Nexus 5 with a width of 360px, the initial scale is 360px / 640px = 0.5625 [i.e. Zoom Out].

Compared to a Nexus 10 with a width of 1280px in landscape, 1280px / 640px = 2.0 [i.e. Zoom In].

Nexus 5

360px / 640px = 0.5625

Nexus 10

1280px / 640px = 2.0

With the addition of an initial-scale=1.0, we are telling the user agent to set the zoom level to 100%, i.e. don’t zoom in or out.

Following this logic, a Nexus 5 with a width of 360px, will show 360px worth of the 640px site and the other 280px will be off screen.

For Nexus 10, which has a width of 1280px, we would expect there to be 640px of white space.

Nexus 5 (Width 360px)

Nexus 10 (Width 1280px)

Setting an initial-scale < 1 the page will zoom out.

In the case of 0.5, you are doubling the number of CSS pixels you can show given the screens width.

For the Nexus 5’s width of 360px, we would have a viewport width of 360px / 0.5 = 720px, which results in our 640px width site having 80px worth of white space.

The Nexus 10 will have a viewport width of 1280px / 0.5 = 2560px, causing 1920px worth of white space.

Nexus 5 (Width 360px)

Nexus 10 (Width 1280px)

To round off the examples, is initial-scale=1.5.

With initial-scale > 1 we are zooming in on the pages content, which ultimately reduces the number of CSS pixels we can show on the screen.

Nexus 5 = 360px width, if we then apply the 1.5 scale, we end up with 360px / 1.5 = 240px [i.e. zoomed in].

Lastly, Nexus 10, 1280px / 1.5 = 853px, so we should still have some white space of 213px.

Nexus 5 (Width 360px)

Nexus 10 (Width 1280px)

iPhone & iPad

Safari on iOS 7 on both of these devices behave the same as Chrome for Android on the Nexus 5 and 10.

Cheatsheet

My memory is terrible so here’s a little bare bones cheat sheet of the images and the viewports applied.

Orig. Photo: https://flic.kr/p/552nnd