Utfordringer med mobil
webutvikling
Utfordringer med mobil
webutvikling
Dritt man må
forholde seg til
<meta name="viewport" content="name=value,name=value">
<meta name="viewport" content="???">
• Eks:
• <meta name="viewport" content="width=320">
• <meta name="viewport" content="...
<meta name="viewport" content="???">
• Eks:
• <meta name="viewport" content="width=320">
• <meta name="viewport" content="...
width=device-width
??
• The reference pixel is the visual angle of one pixel on a device with a
pixel density of 96dpi and a distance from the r...
width=device-width
width=device-width
Dvs: “iphone1-width”
Dvs: 320px
iPhone 5
- 980
user-scalable=no 980
initial-scale=1 320
initial-scale=2 160
height=400 279
user-scalable=no,initial-scale=...
iPhone 5 Android
- 980 980
user-scalable=no 980 320
initial-scale=1 320 320
initial-scale=2 160 160
height=400 279 980
use...
iPhone 5 w: 640, h:1135 Android WP8 rapporterer WP8 er
- 980 980 1024 1024
user-scalable=no 980 320 768 1024
initial-scale...
@media screen and (min-resolution: <X> dpi) {
@viewport {
width: <Y>;
}
}
@media screen and (min-device-pixel-ratio: <X>) {
@viewport {
width: <Y>;
}
}
Konklusjon:
• Lær deg å leve med device-width (320px)
Spørsmål?
Dritt man må forholde seg til
Dritt man må forholde seg til
Upcoming SlideShare
Loading in …5
×

Dritt man må forholde seg til

163 views
108 views

Published on

Presentasjon på NNUG, sutring rundt <meta> taggen

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
163
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
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?

×