CODEWITHSUNDEEP
htmlmobileviewportmeta
JasmineOT
JasmineOT

Reputation: 2068

When to set viewport maximum-scale=1 and user-scalable=yes?

I see setting maximum-scale=1 in viewport meta will stop user to scaling zooming in&out. Then why we need user-scalable at all? And I also see a page with maximum-scale=1 and user-scalable=yes at the same time. What's the usage here? In my understanding, user will be not able to scale the whole page, but for the content, maybe a column chart, user can scale it. Is it right?

Upvotes: 0

Views: 3853

Answers (1)

David Bokan
David Bokan

Reputation: 2297

If the layout width, specified either explicitly with "width=" or implicitly by leaving out the width argument, is larger than the screen width of the device, the user can zoom out (and most browsers will load the page fully zoomed out). At this point, the scale will be less than 1 so setting just maximum-scale=1 means the user can zoom in until the scale reaches 1, just not any closer. The range of page scale in Safari/Chrome is [0.25,5].

You're right though that user-scalable is redundant, but you need to specify a minimum-scale equal to the maximum-scale in order to disable any scaling. e.g. <meta name="viewport" content="minimum-scale=1, maximum-scale=1">.

Upvotes: 1

Related Questions