Reset Viewport Zoom on iOS10 with Javascript

问题

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:

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

回答1:

Issues

attr() is not a JavaScript function. It is a jQuery method.
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"]'));

回答2:

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

回答3:

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);
    }

来源：https://stackoverflow.com/questions/44599800/reset-viewport-zoom-on-ios10-with-javascript

标签

javascript

ios10

viewport