Meta viewport notes

Here are some notes I’m going to keep for the moment. They’re not necessarily comprehensible.

Defaults

First test without any viewport tag. What is the layout viewport size, and what is the minimum and maximum. Then, apply width=device-width and find the default dips-viewport size.

Any size is right here; we’re just establishing defaults that will influence the other tests on this page.

Test iPhone iPad Android Samsung Android HTC Chrome Opera Presto BlackBerry IE
The default dimensions of the layout viewport without any meta viewport 980 980 980 980 980 980 1024 1024
The width of the visual viewport at maximum zoom (zoomed in) p: 65
l: 97
p: 154
l: 206
p: 100
l: 160
p: 90
l: 160
p: 121
l: 193
p: 24
l: 32
p: 192
l: 320
p: 48
l: 80
The width of the visual viewport at minimum zoom (zoomed out) 980 980 980 980 980 980 1024 1024
Apply width=device-width and measure the layout viewport again. 320 p+l 768 p+l p: 400
l: 640
p: 360
l: 640
p: 601
l: 962
p: 240
l: 320
p: 342
l: 570
p: 320
l: 480

This is the dips-viewport size, except on iOS, which uses the portrait size for both portrait and landscape.

screen.width/height
Do screen.width/height give the dimensions of the dips viewport?
Portrait Portrait Device Device Avail Avail Yes Device
  • Safari gives the portrait dips viewport.
  • Chrome and Opera give the available height (minus toolbars and such)
  • Android and IE give the physical number of pixels on the screen.
Are the visual viewport maximum zoom values the same as without a meta viewport? Yes Yes Yes Yes Yes p: 48
l: 64
p: 70
l: 116
Yes
Zoom factor with width=device-width
Relation between maximum zoom level and dips viewport size
5 5 4 4 about 5 10 about 5 about 6

Chrome and BlackBerry use slightly different values for portrait and landscape

Without any other instructions 10 10 4 4 10 10 10 about 6

To find the maximum zoom factor.

IE uses 6 for landscape and 6 and 2/3 for portrait

initial-scale

- initial-scale 0.5, 1, 2 - width: none, device-width, 300, 750, 1200
Test iPhone iPad Android Samsung Android HTC Chrome Opera Presto BlackBerry IE
initial-scale
Without any other instructions
initial-scale=1
initial-scale=0.5
initial-scale=2
Yes Yes Incomplete Incomplete Yes Yes Yes Buggy

When you set initial-scale to any value, the browser scales the dips viewport to that value, and then resizes the layout viewport to those values.

So initial-scale=2 on an iPhone gives a landscape width of 240 (480/2), which becomes the width of the layout viewport.

The maximum zoom should remain the same as for device-width.

  • Android WebKit obeys the rule only with initial-scale=1. For any other value it applies the correct zoom level, but leaves the layout viewport untouched (i.e. it uses the default).
  • IE10 applies the same width (320) to landscape and portrait. Also, it pretends any value other than 1 is 1. (In other words, the 0.5 and 2 tests give exactly the same result as the 1 test.)
Dips viewport
Reminder
320 x 480 768 x 1024 400 x 640 360 x 640 601 x 962 240 x 320 342 x 570 320 x 320

This is the dips-viewport size.

  • IE’s dips viewport size is incorrect (should be 320x480).
initial-scale
With width=device-width
initial-scale=1
initial-scale=0.5
initial-scale=2
Yes Yes 400x640 360x640 Yes Yes Yes Yes
  • Android WebKit uses the dips viewport as layout viewport. The exact scale does not matter.
initial-scale
With width=300
initial-scale=1
initial-scale=0.5
initial-scale=2
Bug in 2 Yes 400x640 360x640 Yes Yes Yes Yes
  • Android WebKit uses the dips viewport as layout viewport. The exact scale does not matter.
initial-scale
With width=400
initial-scale=1
initial-scale=0.5
initial-scale=2
Bug in 2 Yes 400x400 400x400 Yes Yes Yes Yes
  • Android WebKit obeys the width.
initial-scale
With width=750
initial-scale=1
initial-scale=0.5
initial-scale=2
Bug in 1 and 2 Yes 750x750 750x750 Yes Yes Yes 1024x1024
  • Android WebKit obeys the width.
initial-scale
With width=1200
initial-scale=1
initial-scale=0.5
initial-scale=2
Bug in all Yes 1200x1200 1200x1200 Yes Yes Yes 1024x1024
  • Android WebKit obeys the width.

Android:

IE:

iPhone:

min- and max-scale

- min 0.5 max 2 - min 1 max 2 - min 0.5 max 1 - min 2 max 0.5 (fuck it up a bit) - width none, device-width, 300, 750, 1200
Test iPhone iPad Android Samsung Android HTC Chrome Opera Presto BlackBerry IE
minimum-scale=0.5,maximum-scale=2
Expected zoom interval
p: 160-640
l: 240-960
p: 384-1536
l: 512-2048
p: 200-800
l: 320-1280
p: 180-720
l: 320-1280
p: 300-1202
l: 481-1924
p: 120-480
l: 160-640
p: 171-684
l: 285-1140
p: 160-640
l: 240-960

Bla

minimum-scale=0.5,maximum-scale=2
no other instructions
width=device-width
width=400
width=750
width=400,initial-scale=1
width=400,initial-scale=2

minimum-scale=1,maximum-scale=2
no other instructions
width=750
Yes Yes Incomplete Incomplete Almost Yes Yes Buggy

Expected result: the layout viewport width is calculated as above, and zooming is restricted to between 50% and 200% of the dips viewport width.

Exception: zooming out is only possible until the width of the layout viewport.

  • Android WebKit does not support minimum-scale.
  • Chrome allows zooming up to 975px when the layout viewport is 962px wide.
  • IE:
    • applies the 320x320 device-width layout viewport in the absence of a width or initial-scale directive.
    • does not pay the minimum- and maximum-scale any attention
    • uses a scale factor of 10 on all pages where the layout viewport becomes 400, but I have no fucking clue why and nothing makes any fucking sense.

height

- height=device-height - height=300 - width=device-height
Test iPhone iPad Android Samsung Android HTC Chrome Opera Presto BlackBerry IE
Expected: the height of the layout viewport is set to 400, after which the width is calculated. No No No No No No Zooming issues device-width
  • BlackBerry does not follow the directive, leaving the layout viewport at 1024px. However, it chooses odd initial zoom factors.
  • IE also has zooming issues
Expected: the height of the layout viewport is set to the device-height, after which the width is calculated (and automatically arrives at device-width) No No No No No No Zooming issues initial-scale=1
  • BlackBerry does not follow the directive, leaving the layout viewport at 1024px. However, it chooses odd initial zoom factors.
Expected: the width of the kayout viewport is set to the ideal viewport's height in the current orientation. Landscape Landscape device-width device-width avail avail Yes device-width
  • Chrome tries to do the right thing, but subtracts the height of the toolbars. Thus it gives 529 in landscape (= portrait width 601 minues toolbars), and 793 in portrait (= landscape width 962 minus quite a bit of ... stuff). I’m not sure I understand Chrome’s values completely.
  • Opera does more or less the same.

@viewport

Test iPhone iPad Android Samsung Android HTC Chrome Opera Presto BlackBerry IE
@viewport
No vendor prefixes.

width=400
width=device-width
width and initial-zoom
No No No No No No No No
@-o-viewport
Opera prefix.

width=400
width=device-width
width and initial-zoom
No No No No No Yes No No
@-webkit-viewport
WebKit prefix.

width=400
width=device-width
width and initial-zoom
No No No No No No No No
@-ms-viewport
Microsoft prefix.

width=400
width=device-width
width and initial-zoom
No No No No No No No Buggy