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下Settings>Accessibility>Zoom，那么这将覆盖元标记。来源

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

4

6 回答 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" />

有,与无;

于 2012-05-28T11:12:56.097 回答
5

就我而言，我有这个在 Android (Nexus 5) 和 iPhone 上运行良好的“视口”。

<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />

我希望这对你有帮助！

于 2014-09-05T12:56:43.020 回答
3

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

   document.documentElement.addEventListener('touchstart', function(event) {
     if (event.touches.length > 1) {
       event.preventDefault();
     }
   }, false);
于 2017-02-07T07:53:15.020 回答
1 
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />

在三星 Galaxy S3 上运行良好

于 2014-06-08T08:38:01.027 回答
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">
于 2018-06-14T16:26:30.997 回答
0

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

于 2017-06-04T20:04:31.267 回答