文章/答案/技术大牛

发布

社区首页 >问答首页 >在iPad上更改方向后CSS元素位置的奇怪偏移量

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

Stack Overflow用户

提问于 2011-11-24 17:30:04

回答 3查看 4.8K关注 0票数 1

我有一个为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中，这是不可能发生的。

css

ipad

回答 3

Stack Overflow用户

发布于 2013-03-19 07:21:23

尝试使用媒体查询重新设置固定位置：

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

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

票数 3

Stack Overflow用户

发布于 2012-02-29 01:35:07

这是由于某个元素推动了browser视口的边界，要么宽度超过100%，要么左侧设置为负值。

我发现的一个修复方法是设置主体的溢出以使视区行为：

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

设置body的position会将所有元素(无论是绝对的还是相对的)封装到body中，并在body的边缘裁剪它们。

票数 2

Stack Overflow用户

发布于 2011-11-24 18:22:25

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

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

在你的<head>部分。

更多信息：Determining iPhone orientation using CSS

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8254774

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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