视口元标记在 iPhone 和 Android 中不起作用答案

【问题标题】：Viewport meta tag not working in iPhone and Android视口元标记在 iPhone 和 Android 中不起作用
【发布时间】：2012-06-02 18:16:17
【问题描述】：

我正在使用以下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 在 Settings>Accessibility>Zoom 下选择为 On，那么这将覆盖元标记。 Source

不知道为什么它会在 android 中发生。

【问题讨论】：

Chrome 用户可以通过设置/高级/辅助功能/强制启用缩放来覆盖元：选中。

标签： android iphone html meta-tags viewport

【解决方案1】：

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

<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 的效果，我仍然可以放大和缩小。
您确定使用; 而不是,？ wiki.whatwg.org/wiki/MetaExtensions 和 developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag 说要使用 ,。
我有同样的问题，视口不起作用，我使用了这个，它首先起作用，但后来变得不起作用。这是我的网站：thechill.org。我能做什么？
这是错误的。 Chrome 给出警告：Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.
我有一个博客。在主页上，您不能放大或横向“滚动”。在所有其他页面上，您都可以。代码是一样的（我复制并粘贴了视口的东西）。会是什么？

【解决方案2】：

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />

在三星 Galaxy S3 上运行良好

【讨论】：

将纵向切换为横向，反之亦然，此解决方案会出现问题

【解决方案3】：

就我而言，我有这个在 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。

【解决方案4】：

放置此脚本以避免捏缩放。在最新版本的 safari 中，如果元标记不起作用

   document.documentElement.addEventListener('touchstart', function(event) {
     if (event.touches.length > 1) {
       event.preventDefault();
     }
   }, false);

【讨论】：

event.preventDefault() 是唯一对我有用的东西。我使用如下.on("gesturechange", function(event) { event.preventDefault()

【解决方案5】：

有时您需要将 -webkit-flex:1 添加到容器中（当然，如果使用 flexbox）。这有助于我解决视口问题。

【讨论】：

【解决方案6】：

在普通的 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">

【讨论】：