Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Min and Max Scale - Mobile Web Development

Get Embed Code
4 Languages

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

  1. There are also minimum scale and maximum scale properties too. Which
  2. is a way to limit the extents, that the system is
  3. allowed to scale the page on the device. That seems a
  4. little esoteric at first, but, there is one use that, I
  5. wanted to mention. I don't want, you to think, that I'm
  6. biased. So, after describing how you need to add initial scale,
  7. for iOS to work as expected. I wanted to give equal
  8. time, for, Android. If your page, with device width happens to forcibly,
  9. overflow the page, like this page, where I've added an
  10. element that's very wide, Android will actually, do some rescaling, when
  11. you change screen orientation, to, try to get the whole
  12. page to fit onto the screen. Now, unfortunately, it gets it
  13. wrong, and it tries to zoom it the wrong way.
  14. Now, the only way that I found, to get around this,
  15. other than not overflowing the screen to begin with, is
  16. to set the minimum scale and maximum scale properties, to one,
  17. which will prevent the user from zooming altogether.
  18. As well as, disabling automatic scaling. Let's do
  19. that in the dev tools now. Now let's
  20. try rotating again. We're back to normal here, and
  21. now, you see that even in landscape mode, we get the proper width. Now, the
  22. problem with this, of course, is i can't
  23. zoom anymore. We really don't want to disable zooming,
  24. for, your users; this is an accessibility problem.
  25. So, don't do this in production pages, but,
  26. it can help your testing, in, general just
  27. don't overflow the page and you'll be good.