桌面浏览器上的用户可缩放问题：缩小到 33% 及以下时，所有 CSS 都会消失答案

【问题标题】：Issue with user-scalable on desktop browsers: all of CSS disappears when zooming out to 33% and less桌面浏览器上的用户可缩放问题：缩小到 33% 及以下时，所有 CSS 都会消失
【发布时间】：2020-02-24 00:45:50
【问题描述】：

不确定为什么我在用户可缩放（缩放）时遇到这个问题，我的所有样式在 Chrome 上完全消失 @ 33% 并且更少（IE11 更差：75%）。

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=yes">
<link href="css/zoom.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" />
<link href="css/fm_styles.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" />
<link href="css/ninja-slider.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" />
<link href="images/fmstacked.ico" rel="shortcut icon" type="image/x-icon">
<script src="js/ninja-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="js/w3-include-html.js"></script>

【问题讨论】：

标签： css google-chrome internet-explorer-11 viewport

【解决方案1】：

该问题与您的 css <link> 中的媒体查询有关。如果我们删除<link>中的media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)"，那么问题就会消失。

当我们缩放浏览器时，它们表现为不同的设备，max-width 会发生变化。在我的测试中，当我们缩小时，视口宽度会变得大于 1920px，因此样式表将不会根据媒体查询应用。

更多信息，您可以参考this thread。

【讨论】：

不幸的是它没有用。仍然有缩放问题。当您手动缩小桌面浏览器窗口时，它可以很好地缩放。但是键盘缩放（ctrl+ & ctrl-）完全失去了css。当我从 Chrome 中检查“检查”时，用户代理会转到“显示：无；”。我试图在我的 css 中覆盖它但无济于事。
我尝试了自己的样式表，手动缩小和键盘缩放的结果是一样的。此外，您可以参考this thread 和this thread 了解如何覆盖用户代理样式表。通常，如果您不定义元素的样式，则将使用用户代理样式。