javascript - 为什么一个按钮可以在桌面上工作，但不能在移动设备上工作？

Question

我有两个按钮有问题：

第一个是我的导航菜单的汉堡按钮。

这是我的汉堡按钮的 javascript 代码：

const burgerButton = document.getElementsByClassName('burger')[0]
const navLinks = document.getElementsByClassName('nav-links')[0]

burgerButton.addEventListener('click', () => {
    navLinks.classList.toggle('active')
})

该按钮在 PC 上完美运行，但在移动设备上单击时没有任何作用。但是，由于某种原因，当我将手机横向旋转到横向模式时，按钮可以正常工作。

我怀疑这个问题可能与按钮后面的背景图像有关，因为汉堡按钮在我所有其他网页（没有背景图像）上都可以正常工作。

第二个问题是我的网站徽标图像，它有一个锚标记，可以将用户带回我的主屏幕。就像汉堡按钮一样，它在我的所有页面上都可以正常工作，除了带有背景图像的页面。

背景图像跨越整个页面，因为我将背景大小设置为覆盖，高度设置为 100vh。此外，我将两个按钮的 z-index 更改为 10，以便将它们放在背景图像的前面。但是，这并没有解决问题。

在移动设备上无法点击按钮的一些原因是什么（特别是在纵向模式下）？

（顺便说一句，我正在 ios 设备上进行 safari 测试。我不确定这是否重要。）

标签： javascriptmobilebackground-imagemobile-safari