Question

我有一个为iPad开发的网页，我为不同的方向使用了不同的CSS文件：

<link REL="stylesheet" href="portrait_style.css" media="all  and (orientation:portrait)"/>
<link REL="stylesheet" href="landscape_style.css" media="all  and (orientation:landscape)"/>

当我从横向模式开始然后移动到肖像时，我必须向所有绝对定位的元素添加125px。当我从肖像开始时，它从0开始。

当我从纵向移动到横向并返回时，它再次需要偏移。

有一个可用的演示here

我怀疑问题是在纵向模式下有些景观元素没有改变。

在我的电脑上的Chrome中，这种情况并没有发生。

Answer 1

尝试使用媒体查询再次设置固定位置：

/* portrait */
@media screen and (orientation:portrait) {
    .[your-selector]{
        position:fixed;
    }
}
/* landscape */
@media screen and (orientation:landscape) {
    .[your-selector]{
        position:fixed;
    }
}

看起来当你再次设置属性时，它会重新绘制它。

Answer 2

这是由推动浏览器视口边界的元素引起的，宽度超过100％或左侧设置为负值。

我发现的一个修复是设置主体的溢出以使视口表现为：

body {
     position: relative;
     width: 100%;
     overflow: hidden;
}

设置正文的position会将所有元素（无论是绝对的还是相对的）封装到正文中，然后将它们剪切到正文的边缘。

Answer 3

您可能需要添加以下内容：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

在<head>部分。

更多信息：Determining iPhone orientation using CSS

在iPad上更改方向后，CSS元素位置的奇怪偏移量

3 个答案: