Css 媒体查询不适用于平板电脑和iPhone 5s等横向手机

我正在尝试为我的网站添加一个单独的移动导航菜单，从平板电脑一直到手机。出于某种原因，在某些平板电脑上仅使用横向视图时，绿色菜单在iPhone 5的整个宽度上显示50%。“打开”图标没有出现，只是“关闭”图标，出于某种奇怪的原因，它同时充当“打开”和“关闭”按钮。它在我的两台笔记本电脑（1024x768和1440x960）、一台台式电脑（1920x1080）、一台iPhone 5s（仅640×1136纵向视图）和iPad上都能很好地工作（我的兄弟们不确定屏幕分辨率，但他说它看起来不错）。我甚至有一个视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这是我的测试地点：

提前感谢您的帮助！我快要放弃了。

试试

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">

#mobilefix {
   display:none;
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
   #mobilefix {
      display:block;
   }
}

#美孚{
显示：无；
}
@仅媒体屏幕
和（最小设备宽度：320px）
和（最大设备宽度：568px）
和（方向：景观）{
#美孚{
显示：块；
}
}

您的问题源于将菜单320px向左变换：

.menu-wrap {
    transform: translate3d(-320px,0,0);
}

这意味着当屏幕宽度>320px，但小于移动/桌面断点时，菜单将从右边缘显示320px

尝试使用基于百分比的转换，而不是硬编码iPhone屏幕宽度：

.menu-wrap {
    transform: translate3d(-100%,0,0);
}

使用新样式时，它看起来是这样的：

---

非常感谢，这就解决了问题！！！我不敢相信我忽略了这一点。我真的很感激。再次感谢。我已经试过了，不起作用，但是谢谢你的帮助。Quantumwannabe解决方案为我修复了它。我很感激！

.menu-wrap {
    transform: translate3d(-100%,0,0);
}