Iphone X视口从纵向切换到横向会导致页面顶部无法点击。

问题描述 投票:2回答:2

在iPhone X上,从纵向旋转到横向后,页面顶部的链接变得无法点击的问题。在纵向模式下,点击 "隐藏工具栏",然后旋转到横向。使用以下代码,我似乎无法点击 "关闭 "按钮。难道屏幕顶部是为地址栏预留的不可点击区域?

JSFiddle与代码。https:/jsfiddle.netk673b48n1

我的代码中是不是遗漏了什么?这是不是某种错误?

<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

css ios iphone viewport
2个回答
2
投票

我已经测试了这个问题 iPhone 8Xs,Safari浏览器。做的正是你所描述的。在纵向模式下,我点击了 "隐藏工具栏",然后旋转到横向。

iPhone 8.第一次和你描述的一模一样,不过当我回到纵向模式时--警告。第一次和你描述的一模一样,虽然当我回到纵向模式时 - 警报也没有工作。但是!在重新加载页面后--我无法重复这个问题。一切都开始正常工作。在隐藏工具栏和改变方向后--我点击了 关闭,出现完整的工具栏,警报工作正常。我已经尝试了不同的组合,重新加载页面,应用程序,重新打开标签 - 工作正常。

iPhone Xs。 和你描述的一模一样 每次我重载页面时,这个问题都会重复出现。有时 关闭 即使我把手机转回纵向模式,按钮也没有反应。有时在点击3-4次后,就会出现应有的提示。

小结

  1. 这绝对是一个Safari + iPhone X(s)的错误,虽然可以在其他型号的iPhone上检测到。
  2. 这个问题与 关闭 按钮在屏幕的上边缘,这绝对是一个 警示窗口 问题。你可以使用一些技巧如何 更换标准警报.

1
投票

position:absolute 从正常的文档流中删除元素。如果有的话,该元素将相对于最近的被定位的元素定位;否则,它将相对于它的初始容器定位。也许 在Safari上,它不做。所以你可以使用 position:relative 关于 <body> 以确保它是在 <body>. 而且你也可以使用大量的 z-index 来安排堆叠上下文顶部的标题。

更多信息。

position-absolute

z-指数

叠加语境


如果你不需要改变文档的正常流程,你可以使用 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>
© www.soinside.com 2019 - 2024. All rights reserved.