在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上

回答

相關問題