时间戳

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

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

问题描述

不确定为什么我会在用户可缩放（缩放）的情况下遇到这个问题，我的所有样式在 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>

标签： cssgoogle-chromeinternet-explorer-11viewport

解决方案

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

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

有关更多信息，您可以参考此线程。

推荐阅读