Reset Viewport Zoom on iOS10 with Javascript

Question

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.

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

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).

Answer 1

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"]'));