Reset Viewport Zoom on iOS10 with Javascript

Question

I have a page on which I need to reset the zoom command (increase), and return it to its original state with a decrease.

Sounds like an old proven method of rewriting a 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 work on ios10 anymore (page remains enlarged). Is there any way around this?

Update

.attr is a jquery method, my mistake is to leave this in the original question (it is assumed that setAttribute I tried to collect a few different things to make this work). Nevertheless, the problem remains. I created a demo page here .

On iOS 10+, scaling is really far, for example:

Changing the viewport when you increase the width of the previous device does not change the zoom when changing the viewport meta tag. This works on Android (at least in the Chrome browser).

Answer 1

Questions

• attr() not a JavaScript function. This is the jQuery method.
• you use viewportmeta to get the meta tag, and then try setting the attribute to a viewport variable that is not declared.

Decision

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

Syntax:

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

Excerpt

 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 content if meta[name=viewport] present on the page.

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

Working fragment

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

Answer 2

if you want to go to the default zoom level, since the page has at loading first use below fragment.

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

This will set the default scale and allow your user to zoom in if he wants. I tested it on my iPhone 6 / iOS 10

Answer 3

In addition, I found that when setting the meta content of the viewport, it affects only once . If you try to zoom out several times, you may 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); }