Scaling large page to small viewport (zooming out)

Question

I already looked at the solutions under scale fit mobile web content using viewport meta tag but didn't have any luck with the samples provided.

My problem is that I have 940px wide web page which needs scaling up or down depending on the device viewport width. I'm using Phonegap to port web pages into an Android app.

If my viewport is over 940px, like on my 1200px wide phone, then the code below works fine. The viewport zooms just the right amount so that page fills the display:

var mvp = document.getElementById('view');
var ratio= screen.width / 940
mvp.setAttribute('content', 'width=device-width, initial-scale='+ ratio +', target-densitydpi=device-dpi')

However, if I have a low resolution tablet with a width lower than 940, the page is too big to fit, and needs moving around in order to see the off-screen parts. Based on discussion in the aforementioned thread, I tried the following, but no combination of viewport settings will force it to scale to 940, so that the view port can "zoom out" to the right size:

if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + screen.width)};

or

if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + 940)};

do not work. In fact, setting viewport width to any value manually just doesn't have any effect at all.

What I am I doing wrong? I just want the viewport width to zoom out so the whole width of the 940px page shows correctly. There must be a combination of viewport settings that will do this for me. I'd appreciate help.

David Bokan David Bokan · Accepted Answer · 2018-02-14T22:53:11

The width value of the viewport meta tag sets only the layout width or "initial containing block" width. i.e. If you give the <html> element a style of width: 100%, the width it will end up in pixels is what you set in the viewport meta tag.

If your page is really 940 px (because, for example, you give your html an explicit width: style="width: 940px"), then width in the viewport tag wont have any effect (well, depends on which browser and other quirks - so setting it to 940 is a good idea).

So it's just a matter of making sure the page loads fully zoomed out. Browsers won't let you zoom out further than the content width of your page so you don't need a special case for larger screens. Chrome should load the page fully zoomed out. Firefox and Safari, as far as I can tell, usually load the page so that the width= attribute you set in the viewport tag fits in the device screen (hence my caveat above). So you really don't have to do much with the viewport meta tag:

<meta name="viewport" content="width=940">

Should do the trick, for both larger and smaller screens -- assuming your content is actually 940px wide. If that doesn't work, chances are your content has some size dependency on the viewport size or you have an extra wide element somewhere - a link or example to the content might be helpful.

Scaling large page to small viewport (zooming out)

1 Answers