Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dritt man må forholde seg til

225 views

Published on

Presentasjon på NNUG, sutring rundt <meta> taggen

  • Be the first to comment

  • Be the first to like this

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?

×