iPhone 6 Plus 横向模式下带有标签和固定元素的奇怪错误
Posted
技术标签:
【中文标题】iPhone 6 Plus 横向模式下带有标签和固定元素的奇怪错误【英文标题】：iPhone 6 Plus strange bugs in landscape mode with tabs and fixed elements 【发布时间】：2016-06-06 21:29:57 【问题描述】：iPhone 6+ Safari（主要是 ios 9，虽然 iOS 8 也有一些小故障）在标签模式打开时遇到了一些疯狂的问题。所有固定元素在纵向和横向中正确定位，但在打开一个或多个选项卡的横向模式下不可见和/或移动。即使它们不可见，它们仍然可以单击并与其余内容重叠。旋转装置在一定程度上解决了这个问题，以及标签之间的切换。将元素位置从固定设置为静态并返回也有帮助。
html：
<html>
<head></head>
<body>
<div id="application">
<div class="outer-header">
<div class="inner-header">
<a id="link-test" href="#">Click me!</a>
</div>
</div>
</div>
</body>
</html>
CSS：
body
background: linen;
.outer-header
position: fixed;
width: 100%;
height: 30px;
top: 0;
left: 0;
background: steelblue;
.inner-header
background: white;
应用程序很大，但我设法在 codepen 上重现了这个问题： iPhone 6 Plus position:fixed bug
直接在横向打开它并打开标签。
【问题讨论】：
【参考方案1】：如果您向应用程序元素添加样式将起作用。像这样的：
document.querySelector('#link-test')
.addEventListener('click',
function(e)
e.preventDefault();
alert('You did it!');
);body
background: linen;
#application
position: relative;
.outer-header
position: fixed;
width: 100%;
height: 30px;
top: 0;
left: 0;
background: steelblue;
.inner-header
background: white;
<html>
<head></head>
<body>
<div id="application">
<div class="outer-header">
<div class="inner-header">
<a id="link-test" href="#">Click me!</a>
</div>
</div>
</div>
</body>
</html>【讨论】：
以上是关于iPhone 6 Plus 横向模式下带有标签和固定元素的奇怪错误的主要内容，如果未能解决你的问题，请参考以下文章
如何为 iPhone 6 / 6 Plus 仅横向应用程序创建启动图像？
支持iPhone 6和iPhone 6+，具有不同的启动/启动屏幕图像，适用于iPad纵向和横向方向
在横向屏幕上旋转不是 iPhone 5 和 iPhone 6 上的视图
CSS 位置问题：在 iOS 9 iPhone 6+ 中以横向模式修复