ios - 使用 CSS3 的媒体查询时移动 Safari 回流错误

Question

我正在开发一个网站，该网站将在 iPad 的移动 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 计算百分比并将其转换为像素大小，然后将其作为变量加载，这样一旦屏幕旋转，它就不会更新为新的(“更小的错觉”)尺寸。