浏览器放大率不是100%时Safari中的最小宽度媒体查询中断
#容器包含两个div:#left和#right。它们的两种背景色都由窗口宽度决定：当窗口宽度大于50ems时，它们的背景为红色；当窗口宽度小于50ems时，为绿色 然而，这是通过“左”和“右”的不同机制实现的#左侧的背景色由窗口调整大小事件处理程序设置#右侧的背景色由媒体查询设置 尽管这是通过不同的机制进行的，但两者的断点是相同的：50ems，理论上，这意味着当且仅当#右为绿色时#左为绿色（因此，当且仅当#右为红色时#左为红色） 这适用于任何放大倍数的铬。这在Firefox上可以任意放大。然而，这只适用于放大100%的Safari。当偏离100%时，在50em断点附近会出现一个div为红色，另一个为绿色的情况。换句话说，媒体查询和窗口大小调整处理程序正在检测不同的em宽度 我正试图让我的网站在任何放大率下都能与任何broswer兼容，但这次狩猎之旅真让我受不了。对于那些在Safari中以90%或110%的放大率查看站点的人，我如何实现“左绿色如果且仅右绿色”的结果浏览器放大率不是100%时Safari中的最小宽度媒体查询中断,safari,media-queries,magnification,Safari,Media Queries,Magnification,#容器包含两个div:#left和#right。它们的两种背景色都由窗口宽度决定：当窗口宽度大于50ems时，它们的背景为红色；当窗口宽度小于50ems时，为绿色 然而，这是通过“左”和“右”的不同机制实现的#左侧的背景色由窗口调整大小事件处理程序设置#右侧的背景色由媒体查询设置 尽管这是通过不同的机制进行的，但两者的断点是相同的：50ems，理论上，这意味着当且仅当#右为绿色时#左为绿色（因此，当且仅当#右为红色时#左为红色） 这适用于任何放大倍数的铬。这在Firefox上可以任意放大。然而，
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
#container{
height: 100px;
width: 100px;
}
.div{
float: left;
width: 50%;
background: green;
}
@media (min-width: 50em){
#right{ background: red;}
}
</style>
</head>
<body>
<div id="container">
<div id="left" class="div"> Left </div>
<div id="right" class="div"> Right </div>
</div>
<script type="text/javascript">
$(window).on("resize", function() {
var width = $(window).width() / parseFloat($("body").css("font-size"));
if( width < 50) document.getElementById("left").style.background = "green";
else document.getElementById("left").style.background = "red";
}).resize();
</script>
</body>
</html>
#容器{
高度：100px；
宽度：100px；
}
.分区{
浮动：左；
宽度：50%；
背景：绿色；
}
@介质（最小宽度：50em）{
#右{背景：红色；}
}
左边
赖特
$（窗口）.on（“调整大小”，函数（）{
var width=$（window.width（）/parseFloat（$（“body”）.css（“font size”））；
if（宽度<50）document.getElementById（“左”）.style.background=“绿色”；
else document.getElementById（“左”）.style.background=“红色”；
}).resize（）；