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

Question

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

    @media only screen and (max-width: 980px), only screen and (max-device-width: 1185px) {
        #画廊{
        左边距：5%；
        保证金最高：15%；
        }
    }

    @media only screen and (max-width: 1185px), only screen and (max-device-width: 980px) {
        #画廊{
        左边距：16%；
        保证金最高：15%；
        }
    }

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

    ＃标识 {
        位置：绝对；
        顶部：30px；
        左：26%；
    }

    #logo 形象 {
        宽度：75%；
    }

每次旋转设备时，此图像都会变得更小。我怎样才能避免这个错误？感谢所有的答案！

Answer 1

由于您使用的是基于百分比的宽度，因此它不会变小，您的屏幕会变大......它的比例没有改变......也就是说，如果你不希望它改变大小，你也可以不硬编码像素大小，而不是百分比大小......或者您可以让javascript计算百分比并将其转换为像素大小，然后将其作为变量加载，因此一旦屏幕旋转它就不会更新为新的（“较小的错觉”）大小。