在CSS元素位置奇怪的偏移iPad上

改变方向后，我有一个iPad，对此我用不同的CSS文件不同的方向开发了一个网页：在CSS元素位置奇怪的偏移iPad上

<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中，这没有发生。

来源

2011-11-24 Zer0wL

您可能需要补充一点：

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

在<head>部分。

来源

2011-11-24 10:22:25 peduarte

谢谢，但我已经有了 – Zer0wL

这是通过按压浏览器视区的边界，无论是与一个宽度超过100％或左设定为负的值的元素引起的。

我已经找到了解决方法是定身的溢出，使视口的行为：

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

设置身体position将封装的所有元素（无论是绝对或相对）进入体内，并将它们夹在身体的边缘。

来源

2012-02-28 17:35:07

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

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

它看起来就像当你重新设置该属性它重新绘制它。

来源

2013-03-18 23:21:22

为我解决了！谢谢。但是我必须使用'position：relative' –

您不必重复position：fixed，只要添加这两个方向特定的块，元素就会重新绘制。这只是一个很好的例子:) –

在CSS元素位置奇怪的偏移iPad上

回答

相关问题