Presentasjon på NNUG, sutring rundt <meta> taggen

1. Utfordringer med mobil
webutvikling

2. Utfordringer med mobil
webutvikling
Dritt man må
forholde seg til

5. <meta name="viewport" content="name=value,name=value">

6. <meta name="viewport" content="???">
• Eks:
• <meta name="viewport" content="width=320">
• <meta name="viewport" content="width=device-width">
• <meta name="viewport" content="initial-scale=1">
• <meta name="viewport" content="height=500">
• <meta name="viewport" content="user-scalable=no">
• <meta name="viewport" content="maximum-scale=2">
• <meta name="viewport" content="minimum-scale=0.2">

7. <meta name="viewport" content="???">
• Eks:
• <meta name="viewport" content="width=320">
• <meta name="viewport" content="width=device-width">
• <meta name="viewport" content="initial-scale=1">
• <meta name="viewport" content="height=500">
• <meta name="viewport" content="user-scalable=no">
• <meta name="viewport" content="maximum-scale=2">
• <meta name="viewport" content="minimum-scale=0.2">

8. width=device-width
??

9. • The reference pixel is the visual angle of one pixel on a device with a
pixel density of 96dpi and a distance from the reader of an arm’s
length. For a nominal arm’s length of 28 inches, the visual angle is
therefore about 0.0213 degrees. For reading at arm’s length, 1px thus
corresponds to about 0.26 mm (1/96 inch).
CSS pixel
??

10. width=device-width

11. width=device-width
Dvs: “iphone1-width”
Dvs: 320px

12. iPhone 5
- 980
user-scalable=no 980
initial-scale=1 320
initial-scale=2 160
height=400 279
user-scalable=no,initial-scale=1 320
user-scalable=no,initial-scale=2 160
user-scalable=no,height=400 279
initial-scale=1,initial-scale=2 160
initial-scale=1,height=400 320
initial-scale=2,height=400 160
width=device-width,user-scalable=no 320
width=device-width,initial-scale=1 320
width=device-width,initial-scale=2 160
width=device-width,height=400 279
width=device-width,user-scalable=no,initial-scale=1 320
width=device-width,user-scalable=no,initial-scale=2 160
width=device-width,user-scalable=no,height=400 279
width=device-width,initial-scale=1,initial-scale=2 160
width=device-width,initial-scale=1,height=400 320
width=device-width,initial-scale=2,height=400 160
width=320,user-scalable=no 320
width=320,initial-scale=1 320
width=320,initial-scale=2 160
width=320,height=400 279
width=320,user-scalable=no,initial-scale=1 320
width=320,user-scalable=no,initial-scale=2 160
width=320,user-scalable=no,height=400 279
width=320,initial-scale=1,initial-scale=2 160
width=320,initial-scale=1,height=400 320
width=320,initial-scale=2,height=400 160
width=640,user-scalable=no 640
width=640,initial-scale=1 320
width=640,initial-scale=2 160
width=640,height=400 279
width=640,user-scalable=no,initial-scale=1 320
width=640,user-scalable=no,initial-scale=2 160
width=640,user-scalable=no,height=400 279
width=640,initial-scale=1,initial-scale=2 160
width=640,initial-scale=1,height=400 320
width=640,initial-scale=2,height=400 160
"" 320
width=device-width 320
width=320 320
width=640 640

13. iPhone 5 Android
- 980 980
user-scalable=no 980 320
initial-scale=1 320 320
initial-scale=2 160 160
height=400 279 980
user-scalable=no,initial-scale=1 320 320
user-scalable=no,initial-scale=2 160 320
user-scalable=no,height=400 279 320
initial-scale=1,initial-scale=2 160 160
initial-scale=1,height=400 320 320
initial-scale=2,height=400 160 160
width=device-width,user-scalable=no 320 320
width=device-width,initial-scale=1 320 320
width=device-width,initial-scale=2 160 160
width=device-width,height=400 279 320
width=device-width,user-scalable=no,initial-scale=1 320 320
width=device-width,user-scalable=no,initial-scale=2 160 320
width=device-width,user-scalable=no,height=400 279 320
width=device-width,initial-scale=1,initial-scale=2 160 160
width=device-width,initial-scale=1,height=400 320 320
width=device-width,initial-scale=2,height=400 160 160
width=320,user-scalable=no 320 320
width=320,initial-scale=1 320 320
width=320,initial-scale=2 160 160
width=320,height=400 279 320
width=320,user-scalable=no,initial-scale=1 320 320
width=320,user-scalable=no,initial-scale=2 160 320
width=320,user-scalable=no,height=400 279 320
width=320,initial-scale=1,initial-scale=2 160 160
width=320,initial-scale=1,height=400 320 320
width=320,initial-scale=2,height=400 160 160
width=640,user-scalable=no 640 320
width=640,initial-scale=1 320 320
width=640,initial-scale=2 160 160
width=640,height=400 279 640
width=640,user-scalable=no,initial-scale=1 320 320
width=640,user-scalable=no,initial-scale=2 160 320
width=640,user-scalable=no,height=400 279 320
width=640,initial-scale=1,initial-scale=2 160 160
width=640,initial-scale=1,height=400 320 320
width=640,initial-scale=2,height=400 160 160
"" 320 320
width=device-width 320 320
width=320 320 320
width=640 640 640

14. iPhone 5 w: 640, h:1135 Android WP8 rapporterer WP8 er
- 980 980 1024 1024
user-scalable=no 980 320 768 1024
initial-scale=1 320 320 768 320
initial-scale=2 160 160 768 320
height=400 279 980 768 320
user-scalable=no,initial-scale=1 320 320 768 320
user-scalable=no,initial-scale=2 160 320 768 320
user-scalable=no,height=400 279 320 768 320
initial-scale=1,initial-scale=2 160 160 768 320
initial-scale=1,height=400 320 320 768 320
initial-scale=2,height=400 160 160 768 320
width=device-width,user-scalable=no 320 320 768 320
width=device-width,initial-scale=1 320 320 768 320
width=device-width,initial-scale=2 160 160 768 320
width=device-width,height=400 279 320 768 320
width=device-width,user-scalable=no,initial-scale=1 320 320 320 320
width=device-width,user-scalable=no,initial-scale=2 160 320 768 320
width=device-width,user-scalable=no,height=400 279 320 768 320
width=device-width,initial-scale=1,initial-scale=2 160 160 320 320
width=device-width,initial-scale=1,height=400 320 320 768 320
width=device-width,initial-scale=2,height=400 160 160 320 320
width=320,user-scalable=no 320 320 768 320
width=320,initial-scale=1 320 320 320 320
width=320,initial-scale=2 160 160 768 320
width=320,height=400 279 320 320 320
width=320,user-scalable=no,initial-scale=1 320 320 768 320
width=320,user-scalable=no,initial-scale=2 160 320 320 320
width=320,user-scalable=no,height=400 279 320 768 320
width=320,initial-scale=1,initial-scale=2 160 160 320 320
width=320,initial-scale=1,height=400 320 320 768 320
width=320,initial-scale=2,height=400 160 160 320 320
width=640,user-scalable=no 640 320 768 640
width=640,initial-scale=1 320 320 640 640
width=640,initial-scale=2 160 160 768 640
width=640,height=400 279 640 640 640
width=640,user-scalable=no,initial-scale=1 320 320 768 640
width=640,user-scalable=no,initial-scale=2 160 320 640 640
width=640,user-scalable=no,height=400 279 320 640 640
width=640,initial-scale=1,initial-scale=2 160 160 768 640
width=640,initial-scale=1,height=400 320 320 640 640
width=640,initial-scale=2,height=400 160 160 768 640
"" 320 320 768 1024
width=device-width 320 320 768 320
width=320 320 320 768 320
width=640 640 640 768 640

15. @media screen and (min-resolution: <X> dpi) {
@viewport {
width: <Y>;
}
}

16. @media screen and (min-device-pixel-ratio: <X>) {
@viewport {
width: <Y>;
}
}

17. Konklusjon:
• Lær deg å leve med device-width (320px)

18. Spørsmål?