视口元标记在iPhone和Android中不起作用_Android_Iphone_Html_Meta Tags_Viewport

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

android iphone html

视口元标记在iPhone和Android中不起作用,android,iphone,html,meta-tags,viewport,Android,Iphone,Html,Meta Tags,Viewport,我正在使用以下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,

我正在使用以下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

，则这将覆盖元标记

不知道为什么会在android上出现这种情况。

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

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

使用

，

而不是



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


我在三星Galaxy S3上工作得很好，我有一个“视口”，它在Android（Nexus 5）和iPhone上工作得很好
<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />



我希望这对你有帮助
 放置此脚本以避免收缩缩放。在最新版本的safari中，如果元标记不起作用
   document.documentElement.addEventListener('touchstart', function(event) {
     if (event.touches.length > 1) {
       event.preventDefault();
     }
   }, false);

有时您需要将-webkitflex:1添加到容器中（当然，若flexbox正在使用）。这有助于解决我的视口问题。
在普通的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">


幸运的唐纳德/自助旅馆
我试过这个。即使看到了width=devicewidth
的效果，我仍然能够放大和缩小而不是，
？比如说使用，
。我也有同样的问题，viewport不工作，我用了这个，它开始工作，但后来就不工作了。这是我的网站：thechill.org。我能做什么？这是错误的。Chrome给出警告：分析元元素内容时出错：'；'不是有效的键值对分隔符。请改用“，”。
我有一个博客。在主页上，你们不能放大或横向“滚动”。在每一页上，你都可以。代码是相同的（我复制并粘贴了视口内容）。这是什么？Chrome用户可以通过设置/高级/可访问性/强制启用缩放：选中来覆盖meta。这就是为我做的。出于某种原因，initial scale
为1会导致不需要的右边距，但是initial scale
为0.5到0.9可以正常工作。我使用0.9是因为我希望尽可能接近1。将纵向切换到横向会给这个解决方案带来麻烦event。preventDefault（）
是唯一对我有效的方法。我使用它的方式如下：。在（“gesturechange”，function（event）{event.preventDefault（）