What happens if layout viewport is smaller than visual viewport?

Question

An explanation of layout viewport and visual viewport can be found here.

I have read here and here that one should use

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

if one wants to optimize a webpage for mobile devices.

I would like to understand the consequences of this on the iphone4 in landscape mode. I would think that the following happens:

width=device-width The device width of the iphone4 is 320px in landscape (see here) even though the iphone 4 has a screen-width of 480px in landscape mode. So the layout viewport is set to 320px.

initial-scale=1.0 This sets 1 CSS pixel to 1 device pixel (see here). Now since the iphone4 has a width of 480 device pixel, this implies for me that the visual viewport is 480px wide.

Thus, the layout viewport is set to 320px and the visual viewport to 480px. Doesn't that imply that the webpage is only shown on the first 320 px of the visual viewport and the remaing 160px are left blank?

To give a more concrete example: Consider the following webpage

<!DOCTYPE html >
<html >
  <head>    
    <meta name="viewport" content="width=device-width;initial-scale=1.0" />
  </head>
  <body>
    <div style='background-color:red;width:100%'>Test</div>     
  </body>
</html>

then in my understanding, this should only fill the screen of the iphone4 in landscape to 320/480=66,66% with red, because the layout viewport would get the length of 320px and since the div-size is relative to the viewport, width:100% is the same as width:320 px, see here:

the CSS layout, especially percentual widths, are calculated relative to the layout viewport

I am assuming that I am wrong and that the iphone4 will probably display the above page in landscape with 100% red - but why? Have I misunderstood something?

Remark: I found this question Can I have more than 320px content in an iPhone, using viewport tag with device-width and initial-scale = 1? which is closly related to my question but with no answer.

davidcl davidcl · Accepted Answer · 2016-01-11T22:42:45

Mozilla's documentation of the viewport meta tag explains this behavior fairly well (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">

By extension, if width=device-width resolves to 320 but the screen is 480 pixels wide, the browser will also expand the layout viewport to 480.

Also from the same document:

Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape.

I think that behavior has changed somewhat in recent versions of iOS, but it can be a confounding factor in figuring out what is going on, as on some devices the layout viewport will sometimes be different when a page is loaded in landscape vs. when the page is loaded in portrait and then rotated to landscape.

Mozilla goes on to say:

If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

I'm not a fan of this technique; I think the cure is worse than the disease in most cases.

What happens if layout viewport is smaller than visual viewport?

3 Answers