我可以即时更改移动浏览器中的视口元标记吗？

我有一个为移动Safari浏览器构建的AJAX应用，该应用需要显示不同类型的内容。

对于某些内容，我需要user-scalable=1，对于其他内容，我需要user-scalable=0。

有没有一种方法可以在不刷新页面的情况下修改content属性的值？

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

javascript mobile-safari viewport

— 胡椒
source

Answers:

148

我意识到这有点老了，但是可以。一些JavaScript可以帮助您入门：

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

只需更改所需的部件，Mobile Safari就会尊重新设置。

更新：

如果您的源代码中还没有meta视口标记，则可以直接将其附加如下内容：

var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);

或者，如果您使用的是jQuery：

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');

— Markquezada
source

真好！不幸的是，我似乎无法使其正常工作。我的情况有些不同：我正在使用一个宽度为980px的网站。内容恰好位于设计的边缘，因此在iPad上看起来很尴尬。我以为我会将视口设置为1020px的宽度，以在任一侧留出20px的余量...但是没有运气：（ viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020'); 仅在某些情况下：我将其放置在某种程度上被锁定的Drupal实例中...因此我无法直接访问头部区域，需要使用Javascript）

— 山姆

这应该很容易。只需直接将其写入。如果您使用的是jQuery，则可能是这样的：

$('head').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">');

或者没有jQuery：document.getElementsByTagName('head')[0].appendChild( ... );

— markquezada 2011年

对于内容属性，移动浏览器的网络检查器在分号上抛出错误。这似乎更有效：viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

— jfroom 2012年

@the_nuts是的，appendChild需要一个节点，而不是字符串。更新。谢谢。

— markquezada15年

@basZero：您可以使用用户代理在运行上述代码之前检查脚本在哪个设备上运行，但总的来说，我认为这是个坏主意。尝试根据设备功能（或必要时的屏幕尺寸）而不是实际设备进行概括。例如，您可以检测设备是否支持触摸事件等（例如，使用modernizr）。取决于您要执行的操作。

— markquezada15年

在你的 <head>

<meta id="viewport"
      name="viewport"
      content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />

您的JavaScript中的某处

document.getElementById("viewport").setAttribute("content",
      "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");

...但是要为您的设备调整它，祝您好运好几个小时...但我仍然不在那里！

资源

— Sonjz
source

大多数情况下已经回答了这个问题，但是我会继续扩展...

第1步

我的目标是在某些时间启用缩放，而在其他时间禁用缩放。

// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');    
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');

// ...later...

// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');

第2步

视口标签会更新，但是捏缩放仍处于活动状态！我必须找到一种方法来获取页面以进行更改...

这是一个hack解决方案，但是切换身体的不透明度可以解决问题。我敢肯定还有其他方法可以做到这一点，但这对我有用。

// after updating viewport tag, force the page to pick up changes           
document.body.style.opacity = .9999;
setTimeout(function(){
    document.body.style.opacity = 1;
}, 1);

第三步

此时，我的问题已基本解决，但还不能完全解决。我需要知道页面的当前缩放级别，以便我可以调整一些元素的大小以适合页面（考虑地图标记）。

// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;

我希望这对某人有帮助。在找到解决方案之前，我花了数小时来敲打鼠标。

— 假设实验室
source

这挽救了我的性命，但我有一个小问题：假设您以100％的比例在叠加层div中显示图片并在移动设备上放大，则您将使用本机浏览器缩放实现来缩放，该实现通常简单地缩放可见区域区域，而无需重新渲染原始文件。另一方面，如果我为禁用的缩放状态删除了“ width = device-width”，则在缩放时可以使图片精细显示，但是当关闭100％div时，我失去了最后一页的位置...

— StefanMüller