Question

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

但是，这是通过#left和#right的不同机制实现的。 #left的背景颜色由window resize event-handler设置。＃right的背景颜色由媒体查询设置。

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

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

我试图让我的网站与任何broswer兼容，无论放大倍数，但这个Safari的东西正在杀了我。如果在Safari中以90％或110％的放大率观看网站，我怎样才能获得“#left green if only＃only 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>

浏览器放大率不是100％时，Safari中的最小宽度媒体查询中断

0 个答案: