Question

我尝试使用以下元视图端口标记来阻止浏览器缩放：

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

但这并不起作用。我知道这是可能的，因为我的缩放在此网站上被屏蔽：futurism.xyz

该网站的视口标记为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

我做错了什么或错过了什么？

Answer 1

试试这个：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

或者这个：

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

Answer 2

你可以使用css。

＆＃13;

body {
    touch-action: none;
}

＆＃13;

<html>
    <head>
    </head>
    <body>
        Content here...
    </body>
</html>

＆＃13;

＆＃13; More information here...

Answer 3

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

我也搜索了它，尝试这个，在bootstrap模板中找到它=）

Answer 4

您的代码中有很多选项。也许一些选项可以统治另一个？尝试尽可能地删除选项。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

应该够了。最后还添加user-scalable=no。

https://css-tricks.com/snippets/html/responsive-meta-tag/

Answer 5

这都是错的，因为它们是滑行。

使用这些（必须同时或不能使用）

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

如何防止桌面浏览器（Chrome，Safari）缩放网页

5 个答案: