Meta viewport

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
Default layout viewport The default dimensions of the layout viewport without any meta viewport	980	980	980	980	980	980	1024	1024

Maximum zoom 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

Minimum zoom The width of the visual viewport at minimum zoom (zoomed out)	980	980	980	980	980	980	1024	1024

width=device-width 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.
zoom + device-width 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
maximum-scale=20 Without any other instructions	10	10	4	4	10	10	10	about 6
maximum-scale=20 Without any other instructions	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
Dips viewport Reminder	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:

At width=device-width or width<=320 it uses the dips viewport.
At width>320 it uses the specified width.
It zooms in correctly, except at 0.5 because the viewports don't have the required size (i.e. zooming out to correct factor is not possible).

IE:

translates any initial-scale value to 1
uses an incorrect dips viewport of 320x320
makes the layout viewport 1024px for width>480.
obeys the rules within these hideous constraints

iPhone:

if the combination of width and initial-scale causes the browser to zoom in in landscape mode
AND the user zooms out in landscape mode and then switches to portrait mode
the minimum-scale for portrait equals the minimum-scale for landscape (i.e. the viewport width) times the portrait/landscape ratio. (So a landscape viewport width of 400 causes a portrait minimum-scale of 268.)
Solution: zoom in as much as possible. The bug disappears.

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
minimum-scale=0.5,maximum-scale=2 Expected zoom interval	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
height=400 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
height=device-height 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.
width=device-height 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