Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

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

like image 213
Matt Coady Avatar asked Jun 17 '17 01:06

Matt Coady


Video Answer


2 Answers

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);
    }
like image 115
Hompoth Lori Avatar answered Oct 23 '22 15:10

Hompoth Lori


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"]'));
like image 5
Sagar V Avatar answered Oct 23 '22 13:10

Sagar V