logo标签列表

iPhone和Android中Viewport meta标记无法正常工作

androidiphonehtmlmeta-tagsviewport
19

我正在使用以下 HTML 代码

<!DOCTYPE HTML>
  <html>
    <head>
     <title>test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
    test
    </body>
  </html>

我想阻止用户缩放页面，但上述代码在iPhone和Android中无效。有解决方案吗？

编辑：在iPhone设置中，如果在“设置>辅助功能>缩放”下选择了Zoom为On，则这将覆盖meta标签设置。 来源

不确定为什么在Android上会发生这种情况。

1
Chrome用户可以通过设置/高级选项/可访问性/强制启用缩放:勾选来覆盖meta。 - user3108698
6个回答
5

我使用这个标签来防止在所有移动平台上缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />

使用,而不是;

我已经尝试过了。虽然width=device-width的效果可以看到，但我仍然能够进行缩放。 - Prabhat
10
您确定要使用分号 ; 而不是逗号 , 吗？http://wiki.whatwg.org/wiki/MetaExtensions 和 https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag 建议使用逗号 ,。 - cherouvim
我有同样的问题，视口不起作用，我使用了这个代码一开始它可以用但后来就变得无法工作。这是我的网站：thechill.org。我该怎么办？ - Bengi Besçeli
11
有误，Chrome 提示错误：“解析 meta 元素内容出错：';' 不是有效的键值对分隔符，请使用 ',' 代替。” - fregante
我有一个博客。在主页上，您无法缩放或横向“滚动”。在其他每个页面上，您都可以这样做。代码是相同的（我复制并粘贴了视口内容）。可能是什么原因？ - user5306470
我曾经遇到一个问题，即使将最小/最大比例锁定为1且用户比例为0，仍然存在不希望出现的右边距，这会让用户缩小页面。添加target-densityDpi=device-dpi属性/值解决了我的问题。请注意，唯一正确的分隔符是逗号。 - Jay
5
在我的部分，我有一个“viewport”，在Android（Nexus 5）和iPhone上都能够很好地工作。
<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />

我希望您能从中受益！
这就是为我解决问题的方法。由于某种原因，initial-scale 为1会导致不需要的右侧间距，但 initial-scale 为0.5到0.9则正常工作。我使用了0.9，因为我想尽可能接近1。 - Jason Swett
3
将此脚本放置以避免捏合缩放。在 Safari 的最新版本中，如果 meta 标签无效。
   document.documentElement.addEventListener('touchstart', function(event) {
     if (event.touches.length > 1) {
       event.preventDefault();
     }
   }, false);
event.preventDefault() was the only thing that worked for me. I used it as follows .on("gesturechange", function(event) { event.preventDefault() - PouncingPoodle
1

在普通的iOS（11.3）浏览器中似乎不再起作用。

但是，如果将其添加到主屏幕并从那里启动，则仍会影响网页。

因此，如果您触摸共享菜单，选择“添加到主屏幕”，然后从那里打开它，它将阻止您按预期缩放：

<meta charset="utf-8" />
<title>luckydonald/SelfhostedMouse</title>
<meta name="apple-mobile-web-app-title" content="SelfhostedMouse" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no; width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0">
1
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />

在三星 Galaxy S3 上表现良好

切换纵向和横向可能会对这个解决方案造成麻烦。 - Mo.
0
有时候你需要在容器中添加-webkit-flex:1（如果使用了flexbox）。这对我的视口问题很有帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接