iPad上的CSS-如何使两个方向的行为相同？

我的bootstrap menu.CSS中有一些CSS，这使得宽模式下的菜单与窄模式下的菜单非常不同。我希望两者都像在狭窄的模式下一样。这是选择器块：

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
     ... a bunch of css
}

这很容易理解

用Chrome打开那个页面

点击F12获取Chrome开发者工具

单击移动图标

从下拉列表中选择iPad

请注意，在窄模式下，菜单如下所示（我想要）：

好的，现在点击chrome dev tools中的方向图标旋转ipad查看器，你会看到这个更高的菜单（这是错误的）：

我怀疑CSS选择器中的一个调整会迫使宽菜单看起来像窄菜单，但我不知道怎么做。事实上，理想的做法是使宽菜单看起来像完整的PC（非平板电脑）菜单，但可以正确扩展和导航。当我在ipad上恢复到PC大小菜单时，它看起来不错，但您无法导航到子菜单。所以选择A是可以的，但如果有办法的话，选择B会很棒

有什么想法吗