为什么按钮不能在台式机上工作，而不能在移动电话上工作？

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浏览器中进行测试。我不确定这是否重要。）