IOS上的固定位置和傾斜

當我傾斜iPhone或iPad時，在我的網站中存在固定位置的問題。我已經閱讀了很多關於IOS中的固定定位的主題，但即使前一段時間它已經是一個很大的主題，似乎現在Safari for IOS支持CSS「position：fixed」（至少部分根據http://caniuse.com/#search=fixed）。事實上，它大部分時間都在工作，但當我傾斜設備時，我還有一個問題。IOS上的固定位置和傾斜

我在我的身體：

<header>Title</header> 
<main>Content</main>

和：

header { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 10; 
    height: 50px; 
    padding: 0px 10px; 
    width: inherit; 
}

當我看到我的網站的橫向滾動了一下，然後再回來肖像，固定定位的元素（我的標題）最終在頁面中間保持其橫向大小。我只需要手動滾動一下，或者只需觸摸屏幕，一切都重新就位。

如何在傾斜後避免此顯示錯誤？我寧願避免像iScroll這樣的附屬庫，現在應該支持固定位置。當屏幕被調整大小時，我也嘗試使用jquery滾動，但它不能完全工作。

$(window).resize(function(event) { 
    var currentPosition = $(window).scrollTop(); 
    $(window).scrollTop(currentPosition+1); 
});

隨着IOS5設備上這個解決方案中，固定報頭正確地停留在頂部，但從橫向到縱向轉變時，它保持它的橫向尺寸（與屏幕上的觸摸的手動滾動使得頭得到它的正確尺寸）。

感謝您的幫助。

來源

2014-01-30 j3r6me

我已經做了一些實驗，我已經解決了與元視口標籤一起玩的問題。我的頭標籤被包含：

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

我想：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />

現在我沒有錯傾斜的行爲了，變焦仍被禁用。它似乎也適用於Android，也適用於頂部和底部的固定位置。

來源

2014-01-31 10:11:44 j3r6me

IOS上的固定位置和傾斜

回答

相關問題