CODEWITHSUNDEEP
androidhtmlgoogle-chromeviewport
IanS
IanS

Reputation: 1604

Enable 'zoom out' from initial viewport

This is an issue with handling the viewport meta tag on my Android Chrome browser (Not tested in other browsers).

I want a web page that can be zoomed OUT, not just zoomed IN.

If I use this:

<meta name="viewport" content="width=device-width, initial-scale=0.5">

I can zoom out to a scale of 0.5 (and 0.5 is the 'initial' zoom, as I would have expected)

But if I use this:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5">

I can't zoom out past the initial scale.

Have I misunderstood the meaning of initial-scale?

Upvotes: 8

Views: 5019

Answers (1)

David Bokan
David Bokan

Reputation: 2297

The browser won't let you zoom out further than the content width. You can't zoom out to see things "beyond" your content.

Since you specify width=device-width, the page will use your device width as the layout width. Say, for example, you have a screen that's 400px wide. Without giving your elements an explicit size (e.g. width: 1000px), your content will be 400px wide. Thus, the minimum scale factor you can zoom out to is 1 (400px / 400px). If you add an element that has width: 800px, the content will now be 800px wide so the minimum scale will be 0.5.

So you need to make your content wider. Either make your content wider explicitly, or use an explicit width in your meta tag, e.g. <meta name="viewport" content="width=800, initial-scale=1">.

Also, note that without initial-scale, the browser will load your page zoomed out as far as it can.

Upvotes: 8

Related Questions