使用CSS3的媒体查询时移动Safari重排错误

Question

我正在开发一个可在iPad的Mobile Safari和标准PC的浏览器上显示的网站。 为了适应我的布局（尤其是移动浏览器，我正在使用这个CSS3媒体查询：

    @media only screen and (max-width: 980px), only screen and (max-device-width: 1185px) {
        #galleria {
        margin-left:5%;
        margin-top:15%;
        }
    }

    @media only screen and (max-width: 1185px), only screen and (max-device-width: 980px) {
        #galleria {
        margin-left:16%;
        margin-top:15%;
        }
    }

此方法有效，但当我旋转设备时，错误就会出现。 基本上在这个页面中有一个代表图像的名为“logo”，这里是它的CSS：

    #logo {
        position:absolute;
        top:30px;
        left:26%;
    }

    #logo img {
        width:75%;
    }

每次旋转设备时，此图像变得更小。 我该如何避免这个错误？ 谢谢你的所有答案！

Answer 1

由于你使用的是基于百分比的宽度，它不会变小，你的屏幕变得越来越大......它的比例没有改变......那就是说，如果你不希望它改变尺寸你可以不努力 - 以像素大小编码，而不是百分比大小......或者你可以让javascript计算百分比并将其转换为像素大小，然后将其作为变量加载，这样一旦屏幕旋转，它将不会更新为新的（“较小的幻觉”）大小。