Question

我使用以下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中无效。任何解决方案？

编辑：如果在Zoom下On选为Settings>Accessibility>Zoom，则会显示在iPhone设置中，这将覆盖元标记。 Source

不确定为什么它会在android中发生。

Answer 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" />

使用,而非;

Answer 2

就我而言，我是这个＆＃34; viewport＆＃34;它适用于Android（Nexus 5）和iPhone。

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

我希望这能帮到你！

Answer 3

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

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

Answer 4

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

在三星Galaxy S3上运作良好

Answer 5

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

Answer 6

有些时候你需要将-webkit-flex：1添加到容器中（如果使用的是flexbox）。这对我的视口问题有帮助。

Viewport元标记无法在iPhone和Android中运行

6 个答案: