Reset Viewport Zoom on iOS10 with Javascript

12
votes

I have a page that I need to reset the viewport scale (the pinch zoom) on command, setting it back to the initial zoomed out state.

Looks like the old tried and true method of rewriting the meta viewport:

const viewportmeta = document.querySelector('meta[name="viewport"]');
viewport.attr('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");

doesn't seem to have any effect anymore on ios10 (page remains zoomed in). Is there any way around this?

Update

.attr is a jquery method, my mistake for leaving that in the original question (supposed to be setAttribute I was trying a bunch of different things to make this work). The issue still stands though. I've built a demo page here.

On iOS 10+ zoom in really far, like this:

enter image description here

Changing the viewport when you've zoomed past device width doesn't zoom back out when viewport meta tag is changed. This does work on android (at least in the chrome browser).

3
javascriptios10viewport
Does this page already contain the meta tag of name viewport? – 李骏骁
@Mattcoady check the answer and let me know if you have any problem – Sagar V
@SagarV no, that didn't work. I've set up a test page here (with your snippet): mattcoady.me/test.html Pinch zoom in really far and click the button. The viewport does not zoom back out to device-width. I've added more details in my edit above. – Matt Coady
@MattCoady are you sure you want to allow the user to zoom in? – Sagar V
None of the above answers worked for my case (dealing with iOS zoom triggered by focussing on an input field). My breakthrough came by finding this post. Solution #3 was simple and appropriate for my needs: by adding font-size: 16px; to the tags body and my input field, I prevented iOS from auto-zooming in the first place. – Magnus

3 Answers

5
votes

Issues

  1. attr() is not a JavaScript function. It is a jQuery method.
  2. you are using viewportmeta to get the meta tag and then try to set attribute to viewport variable, which is not declared.

Solution

Since you are using JavaScript, use the setAttribute method instead.

Syntax :

const viewportmeta = document.querySelector('meta[name=viewport]');
viewportmeta.setAttribute('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");

Snippet

let viewportmeta = document.querySelector('meta[name="viewport"]');

viewportmeta.setAttribute('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");
console.log(document.querySelector('meta[name="viewport"]'));
<meta name="viewport" />

It will set the content on if the meta[name=viewport] is present in the page.

If you don't have a <meta name="viewport".../> in the page, create one, use setAttribute to set name=viewport and append it to head.

Working Snippet

let viewportmeta = document.querySelector('meta[name="viewport"]');
if(viewportmeta===null){
  viewportmeta = document.createElement("meta");
  viewportmeta.setAttribute("name","viewport");
  document.head.appendChild(viewportmeta);
  
  viewportmeta = document.querySelector('meta[name="viewport"]');
}
viewportmeta.setAttribute('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");
console.log(document.querySelector('meta[name="viewport"]'));
1
votes

Also, I found that setting the value of meta viewport content, it only has any effect only once. If you try to zoom out multiple times, you might need to apply random values.

    function pinchOut() {
        appliedScale = 1 - Math.random()*0.01;
        document.querySelector('meta[name="viewport"]').setAttribute('content', "width=device-width, initial-scale=" + appliedScale);
    }
0
votes

if you want to go to the default zoom level as the page has when load it first use below snippet. 

const viewportmeta = document.querySelector('meta[name=viewport]');
viewportmeta.setAttribute('content', "width=device-width, initial-scale=0");

This will set the default zoom and let your user zoom in again if he wants. I checked this in my iPhone 6/iOS 10