不确定我为什么要使用用户可缩放比例(缩放)来解决这个问题,因为我的所有样式都完全消失了,@ 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 <link>
中的媒体查询有关。如果我们删除media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)"
中的<link>
,则问题将消失。
当我们缩放浏览器时,它们表现为不同的设备,max-width
将改变。在我的测试中,当我们缩小时,视口宽度将变得大于1920px,因此根据媒体查询不会应用样式表。
有关更多信息,您可以参考this thread。