Min and Max Scale – Mobile Web Development


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

Add a Comment

Your email address will not be published. Required fields are marked *