使用Javascript在iOS10上重置视口缩放 [英] Reset Viewport Zoom on iOS10 with Javascript

问题描述

我有一个页面，我需要根据命令重置视口比例(收缩缩放)，将其设置回初始的缩小状态.

就像重写元视口的旧方法一样:

  const viewportmeta = document.querySelector('meta [name ="viewport"]');viewport.attr('content'，初始比例= 1.0，最小比例= 1.0，最大比例= 1.0")； 

似乎对ios10不再有任何影响(页面仍保持放大).有什么办法解决吗?

更新

.attr是一个jquery方法，我的错误是将其留在原始问题中(假定为setAttribute，我正在尝试各种不同的方法来使之工作).问题仍然存在.我已经在

当缩放超过设备宽度时，更改视口不会在更改视口meta标签时缩小.确实可在android上运行(至少在chrome浏览器中).

解决方案

问题

1. attr()不是JavaScript函数.这是一个jQuery方法.
2. 您正在使用 viewportmeta 获取 meta 标签，然后尝试将属性设置为未声明的 viewport 变量.
li>

解决方案

由于使用的是JavaScript，请改用 setAttribute 方法.

语法:

  const viewportmeta = document.querySelector('meta [name = viewport]');viewportmeta.setAttribute("content"，初始比例＝ 1.0，最小比例＝ 1.0，最大比例＝ 1.0")； 

摘要

  let viewportmeta = document.querySelector('meta [name ="viewport"]');viewportmeta.setAttribute('content'，初始比例= 1.0，最小比例= 1.0，最大比例= 1.0")；console.log(document.querySelector('meta [name ="viewport"]')));  

 <元名称="viewport"/>  

如果页面中存在 meta [name = viewport] ，它将设置 content .

如果页面中没有<元名称=视口" .../> ，请创建一个，然后使用 setAttribute 进行设置 name = viewport 并将其附加到头部.

工作片段

  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'，初始比例= 1.0，最小比例= 1.0，最大比例= 1.0")；console.log(document.querySelector('meta [name ="viewport"]')));  

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

解决方案

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

这篇关于使用Javascript在iOS10上重置视口缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！