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

1. Title:
   Initial Scale - Mobile Web Development
2. Description:

3. 190 0:00 - 0:02
   I did want to mention at this point that
4. 1850 0:02 - 0:06
   there are other viewpoint controls. There's an initial scale property
5. 5930 0:06 - 0:09
   that lets you set what the browser's initial scaling factor
6. 8570 0:09 - 0:12
   will be. It defaults to one and usually, you don't
7. 12490 0:12 - 0:15
   really want to mess with it. If you change it to
8. 14740 0:15 - 0:18
   another number, this changes the initial zoom factor. And the
9. 18250 0:18 - 0:22
   user will probably have to pan or zoom. There is
10. 22270 0:22 - 0:26
    one very critical use to initial scale though. On iOS,
11. 26080 0:26 - 0:28
    if you only set width to device width and
12. 28350 0:28 - 0:32
    you don't set the initial scale, like in this page,
13. 31670 0:32 - 0:35
    when you rotate the screen the iOS web engine
14. 34610 0:35 - 0:38
    will keep the same view port width and rescale it
15. 38080 0:38 - 0:41
    to fit across the landscape screen. It's just stretching
16. 41330 0:41 - 0:45
    the portrait layout, to fit, across the landscape width. Even
17. 44810 0:45 - 0:47
    though I've set width to device width, IOS is
18. 47040 0:47 - 0:51
    still scaling the landscape width. In fact, the interesting bit.
19. 51040 0:51 - 0:54
    is that even if you load this page initially
20. 53690 0:54 - 0:57
    in landscape mode, it still thinks it's the portrait
21. 56790 0:57 - 0:59
    width, it just rescaling it to fit in the
22. 58920 0:59 - 1:03
    landscape screen. Now, if you have the same page,
23. 62990 1:03 - 1:05
    but you set the initial scale to 1 in
24. 65370 1:05 - 1:09
    the viewport meta-element along with setting device width, it'll
25. 69070 1:09 - 1:13
    change the viewport size when you rotate, instead of
26. 72520 1:13 - 1:16
    rescaling. You can see now the window size is 480
27. 76220 1:16 - 1:19
    pixels across. It's the landscape width, not the
28. 79460 1:19 - 1:22
    portrait width. So, in short, this is what
29. 82500 1:22 - 1:25
    you really need to use as your default
30. 84660 1:25 - 1:29
    boiler plate viewport meta-element. You'll need the initial scale,
31. 88850 1:29 - 1:31
    so that IRS, when flipping from portrait to
32. 91090 1:31 - 1:36
    landscape mode will still scale correctly. An interesting side
33. 96110 1:36 - 1:39
    note I discovered is that on Iphones -
34. 98530 1:39 - 1:41
    Although they are changing the viewport size properly if
35. 101290 1:41 - 1:44
    an initial scale is that, they are also
36. 103630 1:44 - 1:47
    changing the default font size for the document
37. 106780 1:47 - 1:50
    and orientation change, effectively zooming up the text
38. 110250 1:50 - 1:53
    when you go to landscape mode. This means
39. 112820 1:53 - 1:56
    you should probably set a default font size
40. 115510 1:56 - 1:59
    on the page, not just use an percentages.
41. 118970 1:59 - 2:03
    You may want to use a reset style sheet to do this, if you aren't already.