English subtitles

← Initial Scale - Mobile Web Development

Get Embed Code
4 Languages

Showing Revision 4 created 05/25/2016 by Udacity Robot.

  1. I did want to mention at this point that
  2. there are other viewpoint controls. There's an initial scale property
  3. that lets you set what the browser's initial scaling factor
  4. will be. It defaults to one and usually, you don't
  5. really want to mess with it. If you change it to
  6. another number, this changes the initial zoom factor. And the
  7. user will probably have to pan or zoom. There is
  8. one very critical use to initial scale though. On iOS,
  9. if you only set width to device width and
  10. you don't set the initial scale, like in this page,
  11. when you rotate the screen the iOS web engine
  12. will keep the same view port width and rescale it
  13. to fit across the landscape screen. It's just stretching
  14. the portrait layout, to fit, across the landscape width. Even
  15. though I've set width to device width, IOS is
  16. still scaling the landscape width. In fact, the interesting bit.
  17. is that even if you load this page initially
  18. in landscape mode, it still thinks it's the portrait
  19. width, it just rescaling it to fit in the
  20. landscape screen. Now, if you have the same page,
  21. but you set the initial scale to 1 in
  22. the viewport meta-element along with setting device width, it'll
  23. change the viewport size when you rotate, instead of
  24. rescaling. You can see now the window size is 480
  25. pixels across. It's the landscape width, not the
  26. portrait width. So, in short, this is what
  27. you really need to use as your default
  28. boiler plate viewport meta-element. You'll need the initial scale,
  29. so that IRS, when flipping from portrait to
  30. landscape mode will still scale correctly. An interesting side
  31. note I discovered is that on Iphones -
  32. Although they are changing the viewport size properly if
  33. an initial scale is that, they are also
  34. changing the default font size for the document
  35. and orientation change, effectively zooming up the text
  36. when you go to landscape mode. This means
  37. you should probably set a default font size
  38. on the page, not just use an percentages.
  39. You may want to use a reset style sheet to do this, if you aren't already.