Upcoming SlideShare
×

# Dritt man må forholde seg til

163 views
108 views

Published on

Presentasjon på NNUG, sutring rundt <meta> taggen

0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total views
163
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
0
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Dritt man må forholde seg til

1. 1. Utfordringer med mobil webutvikling
2. 2. Utfordringer med mobil webutvikling Dritt man må forholde seg til
3. 3. <meta name="viewport" content="name=value,name=value">
4. 4. <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">
5. 5. <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">
6. 6. width=device-width ??
7. 7. • 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 ??
8. 8. width=device-width
9. 9. width=device-width Dvs: “iphone1-width” Dvs: 320px
10. 10. 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
11. 11. 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
12. 12. 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
13. 13. @media screen and (min-resolution: <X> dpi) { @viewport { width: <Y>; } }
14. 14. @media screen and (min-device-pixel-ratio: <X>) { @viewport { width: <Y>; } }
15. 15. Konklusjon: • Lær deg å leve med device-width (320px)
16. 16. Spørsmål?