我正在开发一个网站,该网站将在 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%; }
我每次旋转设备时,此图像都会变小。 我怎样才能避免这个错误? 感谢大家的回答!
最佳答案
因为你使用的是基于百分比的宽度,它并没有变小,你的屏幕变大了……它的比例没有改变……也就是说,如果你不希望它改变大小,你可以不努力- 以像素大小编码,而不是百分比大小...或者您可以让 javascript 计算百分比并将其转换为像素大小,然后将其作为变量加载,这样一旦屏幕旋转,它就不会更新为新的(“更小的错觉”)尺寸。
关于ios - 使用 CSS3 的媒体查询时移动 Safari 回流错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14874901/