logo标签列表

iPhone X的视口从竖屏切换到横屏会导致页面顶部无法点击。

cssiosiphoneviewport
4
在iPhone X上，从竖屏旋转到横屏后，页面顶部链接无法点击。在竖屏模式下单击“隐藏工具栏”，然后旋转到横屏模式。使用以下代码，我似乎无法单击“关闭”按钮。屏幕顶部是保留给地址栏的不可点击区域吗？
带有代码的JSFiddle链接：https://jsfiddle.net/k673b48n/1/ 我的代码有什么问题吗？这是某种错误吗？
<head>
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>


<style>
  .header { position: absolute; right: 5px; }
  .alert-me:before { content: "Close"; position: absolute; top: 2px; left: -47px; }
  .container{ position: absolute; top: 50px; }
</style>


<div class="header">
  <a href="#" onclick="alert('Ahhh General Kenobi')">
    <div class="alert-me">X</div>
  </a>
</div>
<div class="container">
Some lorem ipsum to make the page longer..
</div>

这似乎很正常工作：

portrait - works

页面顶部的关闭按钮现在不响应：

landscape - not working

1
我已经测试过了，它可以很好地工作。可能会有问题，但我没有遇到任何问题。 - Ritanshu Singh
2个回答
1
position:absolute 将元素从普通文档流中移除。该元素的定位相对于其最近的已定位元素（如果有）；否则，相对于其最初的容器进行定位。在 Safari 上可能不适用，因此您可以在 <body> 上使用 position:relative，以确保它在 <body> 内部。您还可以使用大数字的 z-index 来将标题置于堆叠上下文的顶部。
更多信息： position-absolute z-index stacking-context
如果您不需要改变文档的正常流程，您可以使用display:flex; justify-content: flex-end;代替absolute定位将X元素放置在最右边。 

.d-flex {
  display:flex;
}
.justify-content-end {
 justify-content: flex-end;
}

.align-items-center {
   align-items: center;
}


.pr-5px {
  padding-right: 5px;
}
<header class="d-flex justify-content-end align-items-center pr-5px">
  <a href="#" onclick="alert('Ahhh General Kenobi')">
    <div class="alert-me">X</div>
  </a>
</header>


<div class="container">
Some lorem ipsum to make the page longer..
</div>

0

我在iPhone 8和Xs上使用Safari浏览器测试了这个问题。按照你描述的步骤操作，当我处于竖屏模式时，我点击了“隐藏工具栏”，然后旋转到横屏模式。

iPhone 8： 第一次的确如你所述，但是当我回到竖屏模式时，警报也没有起作用。但是！重新加载页面后，我无法重现这个问题。一切都开始正常工作。在隐藏工具栏并更改方向后，我点击“关闭”，完整的工具栏出现，警报正常工作。我尝试了不同的组合，重新加载了页面、应用程序，重新打开了选项卡——一切正常。

iPhone Xs：与你描述的完全相同。每次重新加载页面时都会出现这个问题。有时即使我将手机旋转回竖屏模式，关闭按钮也不起作用。有时在点击3-4次后，警报才会像应该的那样出现。

总结

  1. 这绝对是Safari + iPhone X(s)的一个bug，虽然在其他型号的iPhone上也可以检测到。
  2. 这个问题与屏幕顶部的关闭按钮无关，它绝对是一个警告窗口的问题。您可以使用一些提示来替换标准警告。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接