如何解决此问题，使其不会覆盖Ipad上的其他内容

Question

我当时正在建立一个响应迅速的网站，大多数手机和平板电脑的工作布局都与计算机不同。我知道唯一不起作用的是横向模式下的iPad Pro，因为它的宽度与某些笔记本电脑相同。经过一些研究后，我添加了

@media only screen and (width: 1366px) and (height: 1024px) and (orientation: landscape) {  
  nav ul li {
    display: block;
    width: 100%;
  }
}

应该允许它工作。

这是可行的，但是导航菜单按钮（用于显示菜单）没有显示，而是自动将菜单放下。最重要的是，当您放下菜单项的子菜单时，它不会将其他项下推。

我认为主要问题是它与pc编码结合在一起，因此，如果有人知道如何阻止它们结合起来。

这是正在发生的事情的图像

这是它的外观

指向jsfiddle的链接将出现在注释中，因为这对他们是如此挑剔。