iPad横向模式下的下拉菜单触发

Posted 2023-03-12

【中文标题】iPad横向模式下的下拉菜单触发

【英文标题】：Drop down menu triggering on iPad landscape mode

【发布时间】：2013-10-03 08:29:08

【问题描述】：

我们的网站上有一个简单的基于 CSS（无 JS）的下拉菜单，除了一种之外，它在所有方面都能完美运行。在 iPad 的横向模式下，如果您单击菜单下方的链接（例如面包屑），触摸该链接会触发飞出，然后当您松开手指而不是您最初触摸的链接。

<li>
    <a href="http://categorypage">
    <ul class="flyout">
        <li><a href="blah...

.header li:hover .flyout 
    display: block;

网站（警告成人内容）是http://www.lovehoney.co.uk

到目前为止我尝试过的事情都没有成功：

更改容器的 z 索引。 在弹出窗口上强制显示 none 当然会阻止弹出窗口，但您仍然可以看到导航被触发，所以我认为不是弹出窗口有问题。 指针事件：关闭时没有飞出。

其他信息

此问题影响 iPad 4 的横向模式，但不影响 iPad 1 该错误存在于 Chrome 和 Safari 中 人像模式很好。 点击导航上方不会触发问题。

【问题讨论】：

出于某种原因，从徽标中删除左侧浮动似乎可以解决问题。不幸的是，这会带来更多的麻烦。

【参考方案1】：

最后我通过将视口元数据更改为

解决了这个问题

<meta name="viewport" content="initial-scale=1" />

这稍微降低了响应能力，但解决了问题。