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

【问题标题】：How to prevent desktop browser (Chrome, Safari) from zooming a webpage如何防止桌面浏览器（Chrome、Safari）缩放网页
【发布时间】：2016-05-14 23:31:20
【问题描述】：

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

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

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

【问题讨论】：

user-scalable 仅适用于移动设备。具体来说，我相信它仅适用于 iOS Safari 和 Android Chrome。另外，我可以在您提供的链接（Chrome 57）上zoom just fine。也就是说，检查this question 和this question 和this answer，他们可能会有所帮助
Prevent zoom cross-browser的可能重复

标签： html css web zooming

【解决方案1】：

你可以使用 css。

body {
    touch-action: none;
}

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

More information here...

【讨论】：

【解决方案2】：

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

使用这些（必须同时使用，否则不起作用）

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

【讨论】：

【解决方案3】：

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

我也搜索过，试试这个，在引导模板中找到它=）

【讨论】：

【解决方案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/

【讨论】：

看起来它不存在桌面浏览器的跨浏览器解决方案。你看过这个帖子吗：stackoverflow.com/questions/27116221/prevent-zoom-cross-browser。然后，不建议为桌面用户禁用缩放。

【解决方案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.0, user-scalable=no" />

【讨论】：