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

Question

我的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
}

see this in action here很容易。

1. 在Chrome中打开该页面
2. 点击F12 for Chrome开发者工具
3. 点击移动图标
4. 从下拉列表中选择iPad

请注意，在窄模式下，菜单看起来像这样（我想要的）：



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



我怀疑CSS选择器中的调整会强制宽菜单看起来像窄菜单，但我无法弄清楚如何做到这一点。实际上，理想情况是宽菜单看起来就像完整的PC（非平板电脑）菜单，但是可以正确扩展和导航。当我恢复到ipad上的PC大小菜单时，它看起来不错，但你无法导航到子菜单。因此，选项A可以，但如果有办法，选项B会很棒。

有什么想法吗？