logo标签列表

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

htmlcsswebzooming
7

我尝试使用以下meta viewport标签来防止浏览器缩放：

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

我做错了什么或者遗漏了什么吗？
1
user-scalable 是仅限移动端使用的。具体来说，我认为它只适用于iOS Safari和Android Chrome浏览器。此外，我在你提供的链接（Chrome 57）上可以正常缩放。尽管如此，请查看这个问题和这个问题以及这个答案，它们可能会有所帮助。 - Matheus Avellar
可能是防止跨浏览器缩放的重复问题。 - Sam Denty
5个回答
3

试试这个：

<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" />
2
你可以使用CSS。 

body {
    touch-action: none;
}
<html>
    <head>
    </head>
    <body>
        Content here...
    </body>
</html>
More information here...

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

我也搜索了一下，试试这个吧，我在一个 Bootstrap 模板里找到了它 =)

-1

在您的标签中有很多选项。也许有些选项会排除其他选项？ 尽量将选项减少到最少。

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

似乎在桌面浏览器中并不存在跨浏览器的解决方案。你看过这个帖子吗：https://dev59.com/4V4d5IYBdhLWcg3wJvsp 。因此，不建议禁用桌面用户的缩放功能。 - RoggA
-4

这全都是错的，因为他们是 skids。

使用这些（必须同时使用，否则无法工作）

<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">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接