6 | 7 | # Thanks 8 | Thanks to Patrick H. Lauke for the grid image and report.js code. -------------------------------------------------------------------------------- /atviewport-mq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @viewport {width: device-width;} + media query 6 | 7 | 23 | 24 | 25 | 35 | 36 | 37 |

38 |

viewport setting

39 |

@-o-viewport {
40 | width: device-width;
41 | }
42 | @-ms-viewport {
43 | width: device-width;
44 | }
45 | @media screen and (max-device-width: 480px) {
46 | @-o-viewport {
47 | width: 480px;
48 | }
49 | @-ms-viewport {
50 | width: 480px;
51 | }
52 | }

53 |

reported values

54 | 55 |

lorem ipsum

56 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non elit non enim consectetur iaculis ut ac mi. Sed adipiscing nulla id ipsum placerat congue. Quisque nec diam eget libero convallis iaculis. Nam feugiat purus id diam placerat suscipit. Cras nec tincidunt leo. Integer tincidunt porttitor enim, et elementum augue pellentesque id. Quisque leo velit, tincidunt in pretium in, cursus eu elit. Etiam vitae lacus ligula.

57 |

Quisque nec diam eget libero convallis iaculis. Nam feugiat purus id diam placerat suscipit. Cras nec tincidunt leo. Integer tincidunt porttitor enim, et elementum augue pellentesque id. Quisque leo velit, tincidunt in pretium in, cursus eu elit. Etiam vitae lacus ligula.

58 |

59 | 60 | -------------------------------------------------------------------------------- /atviewport.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | @viewport {width: device-width;} 6 | 7 | 15 | 16 | 17 | 27 | 28 | 29 |

30 |

viewport setting

31 |

@-o-viewport {
32 | width: device-width;
33 | }
34 | @-ms-viewport {
35 | width: device-width;
36 | }

37 |

reported values

38 | 39 |

lorem ipsum

40 |

41 |

42 |

43 | 44 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Understanding viewport 6 | 7 | 8 | 9 | 10 | 11 |

12 |

Understanding viewport: examples

13 |

Basics

14 |

DPI-specific settings

@viewport

@viewport {width: device-width;}
@viewport {width: device-width;} + media query

42 |

Github repo: https://github.com/andreasbovens/understanding-viewport

43 | 44 | -------------------------------------------------------------------------------- /meta-heightdeviceheight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="height=device-height"> 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 |

23 |

viewport setting

24 |

<meta name="viewport" content="height=device-height">

25 |

reported values

26 | 27 |

lorem ipsum

28 |

29 |

30 |

31 | 32 | -------------------------------------------------------------------------------- /meta-initialscale05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="initial-scale=0.5"> 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 |

23 |

viewport setting

24 |

<meta name="viewport" content="initial-scale=0.5">

25 |

reported values

26 | 27 |

lorem ipsum

28 |

29 |

30 |

31 | 32 | -------------------------------------------------------------------------------- /meta-initialscale1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="initial-scale=1"> 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 |

23 |

viewport setting

24 |

<meta name="viewport" content="initial-scale=1">

25 |

reported values

26 | 27 |

lorem ipsum

28 |

29 |

30 |

31 | 32 | -------------------------------------------------------------------------------- /meta-initialscale2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="initial-scale=2"> 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 |

23 |

viewport setting

24 |

<meta name="viewport" content="initial-scale=2">

25 |

reported values

26 | 27 |

lorem ipsum

28 |

29 |

30 |

31 | 32 | -------------------------------------------------------------------------------- /meta-width320.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="width=320"> 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 |

23 |

viewport setting

24 |

<meta name="viewport" content="width=320">

25 |

reported values

26 | 27 |

lorem ipsum

28 |

29 |

30 |

31 | 32 | -------------------------------------------------------------------------------- /meta-width480.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="width=480"> 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 |

23 |

viewport setting

24 |

<meta name="viewport" content="width=480">

25 |

reported values

26 | 27 |

lorem ipsum

28 |

29 |

30 |

31 | 32 | -------------------------------------------------------------------------------- /meta-width640.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="width=640"> 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 |

23 |

viewport setting

24 |

<meta name="viewport" content="width=640">

25 |

reported values

26 | 27 |

lorem ipsum

28 |

29 |

30 |

31 | 32 | -------------------------------------------------------------------------------- /meta-widthdevicewidth-devicepixelratio15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="width=device-width"> with device-pixel-ratio media query (1.5) 6 | 7 | 8 | 9 | 17 | 18 | 28 | 29 | 30 |

31 |

viewport setting

32 |

<meta name="viewport" content="width=device-width">
33 | +
34 | @media (-o-min-device-pixel-ratio: 3/2),
35 |        (-webkit-min-device-pixel-ratio: 1.5),
36 |        (min--moz-device-pixel-ratio: 1.5),
37 |        (min-resolution: 1.5dppx) {
38 | 	body {background-size: 1000px;}
39 | }
40 |

41 |

reported values

42 | 43 |

lorem ipsum

44 |

45 |

46 |

47 | 48 | -------------------------------------------------------------------------------- /meta-widthdevicewidth-devicepixelratio2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="width=device-width"> with device-pixel-ratio media query (2) 6 | 7 | 8 | 9 | 17 | 18 | 28 | 29 | 30 |

31 |

viewport setting

32 |

<meta name="viewport" content="width=device-width">
33 | +
34 | @media (-o-min-device-pixel-ratio: 2/1),
35 |        (-webkit-min-device-pixel-ratio: 2),
36 |        (min--moz-device-pixel-ratio: 2),
37 |        (min-resolution: 2dppx) {
38 | 	body {background-size: 1000px;}
39 | }
40 |

41 |

reported values

42 | 43 |

lorem ipsum

44 |

45 |

46 |

47 | 48 | -------------------------------------------------------------------------------- /meta-widthdevicewidth-devicepixelratio225.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="width=device-width"> with device-pixel-ratio media query (2.25) 6 | 7 | 8 | 9 | 17 | 18 | 28 | 29 | 30 |

31 |

viewport setting

32 |

<meta name="viewport" content="width=device-width">
33 | +
34 | @media (-o-min-device-pixel-ratio: 9/4),
35 |        (-webkit-min-device-pixel-ratio: 2.25),
36 |        (min--moz-device-pixel-ratio: 2.25),
37 |        (min-resolution: 2.25dppx) {
38 | 	body {background-size: 1000px;}
39 | }
40 |

41 |

reported values

42 | 43 |

lorem ipsum

44 |

45 |

46 |

47 | 48 | -------------------------------------------------------------------------------- /meta-widthdevicewidth-div600.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="width=device-width"> + <div style="width: 600px"> 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 |

23 |

viewport setting

24 |

<meta name="viewport" content="width=device-width"> + <div style="width: 600px">

25 |

600px wide div

26 |

reported values

27 | 28 |

lorem ipsum

29 |

30 |

31 |

32 | 33 | -------------------------------------------------------------------------------- /meta-widthdevicewidth-initialscale1-div600.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> + <div style="width: 600px"> 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 |

23 |

viewport setting

24 |

<meta name="viewport" content="width=device-width, initial-scale=1">
25 | + <div style="width: 600px">

32 |

<meta name="viewport" content="width=device-width">

33 |

130×130px image

34 |

260×260px image

35 |

reported values

36 | 37 |

lorem ipsum

38 |

39 |

40 |

41 | 42 | -------------------------------------------------------------------------------- /meta-widthdevicewidth.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <meta name="viewport" content="width=device-width"> 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 |

23 |

viewport setting

24 |

<meta name="viewport" content="width=device-width">

25 |

reported values

26 | 27 |

lorem ipsum

28 |

29 |

30 |

31 | 32 | -------------------------------------------------------------------------------- /noviewport.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | no viewport defined 6 | 7 | 8 | 9 | 19 | 20 | 21 |

22 |

viewport setting

23 |

no viewport defined

24 |

reported values

25 | 26 |

lorem ipsum

27 |

28 |

29 |

30 | 31 | -------------------------------------------------------------------------------- /odevrel130.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbovens/understanding-viewport/098954fe5811593fd4764e64b6d52141d4645635/odevrel130.png -------------------------------------------------------------------------------- /odevrel260.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbovens/understanding-viewport/098954fe5811593fd4764e64b6d52141d4645635/odevrel260.png -------------------------------------------------------------------------------- /pixel-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreasbovens/understanding-viewport/098954fe5811593fd4764e64b6d52141d4645635/pixel-grid.png -------------------------------------------------------------------------------- /report.js: -------------------------------------------------------------------------------- 1 | function report() { document.getElementsByTagName('output')[0].innerHTML = 'screen.width:'+screen.width+'
screen.height:'+screen.height+'
window.innerWidth:'+window.innerWidth+'
window.innerHeight:'+window.innerHeight+'
window.outerWidth:'+window.outerWidth+'
window.outerHeight:'+window.outerHeight+'
document.documentElement.
clientWidth:'+document.documentElement.clientWidth+'
document.documentElement.
clientHeight:'+document.documentElement.clientHeight+'
window.devicePixelRatio:'+window.devicePixelRatio; } 2 | window.addEventListener('load', report, false); 3 | window.addEventListener('resize', report, false); 4 | window.addEventListener('orientationchange', report, false); 5 | window.addEventListener('deviceorientation', report, false); 6 | window.addEventListener('MozOrientation', report, false); 7 | // JS by Patrick H. Lauke. -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body {color: #000; font-family: 'Terminal Dosis', sans-serif;} 2 | body:not([id="index"]) {background: url(pixel-grid.png); } 3 | a {color: #000; background-color: hsla(0, 0%, 100%, 0.5); padding: 0 0.2em 0 0.2em; border-radius: 2px; text-decoration: none;} 4 | article {background: hsla(209, 62%, 51%, 0.8); padding: 10px; border-radius: 10px; overflow: hidden;} 5 | h1 {font-size: 1.5em; font-weight: bold; background-color: hsla(0, 0%, 100%, 0.7); border-radius: 4px; padding: 0 5px 5px 5px; clear:left;} 6 | p {font-size: 1.2em;} 7 | ul {margin-left: 0; padding-left: 0; list-style: none} 8 | li {font-size: 1em; margin-bottom: 0.2em;} 9 | pre, output {font-size: 1em; font-family: monospace; white-space: pre-wrap; display: block;} 10 | pre {font-weight: bold;} 11 | h1, p, pre, output {margin: 0 0 10px 0;} 12 | .fold {border-radius: 10px 250px 10px 10px;} 13 | .fold #top {width: 180px;} --------------------------------------------------------------------------------