1

#container 包含两个 div：#left 和 #right。它们的背景颜色都是由窗口宽度决定的：当窗口宽度大于 50ems 时，它们的背景为红色；当窗口宽度小于 50ems 时，绿色。

但是，这是通过#left 和#right 的不同机制实现的。#left 的背景颜色由窗口调整大小事件处理程序设置。#right 的背景颜色由媒体查询设置。

尽管这是通过不同的机制进行的，但两者的断点是相同的：50ems，理论上，当且仅当#right 为绿色时，#left 为绿色（因此：当且仅当#right 为绿色时，#left 为红色红色的）。

这适用于任何放大倍率的 Chrome。这适用于任何放大倍率的 Firefox。但是，这只适用于 Safari 100% 的放大倍率。当您偏离 100% 时，在 50em 断点附近会出现一个 div 为红色而另一个为绿色的情况。换句话说，媒体查询和窗口调整大小处理程序正在检测不同的 em 宽度。

我正在尝试使我的网站在任何放大倍率下都与任何浏览器兼容，但是这个 Safari 的东西正在杀死我。对于那些在 Safari 中以 90% 或 110% 的放大倍率查看网站的人，我如何才能获得“#left green if 且仅 #right green”的结果？

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

0 回答 0