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上的固定位置和倾斜

回答

相关问题