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

Question

我正在尝试将单独的移动导航菜单添加到我的网站，用于平板电脑一直到手机。出于某种原因，当仅使用横向视图和某些平板电脑时，绿色菜单在我的iPhone 5宽度上显示50％。打开的图标不会出现，只是关闭的图标，它既可以打开也可以作为关闭按钮有一些奇怪的原因。它适用于我的2台笔记本电脑（1024x768和1440x960），1台桌面（1920x1080），1台iPhone 5s（仅限640×1136纵向视图）和iPad（我的兄弟，所以不确定屏幕分辨率，但他说它看起来不错）。我甚至有一个视口设置......

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

我已经尝试了从比率，分辨率，最大和最小宽度，最大和最小设备宽度等我可以想到的每个媒体查询。如果它不是@media查询问题，它必须是一个单独的css冲突，但我无法弄清楚。这个移动菜单没有宽度，边距或位置，我可以看到。

我试图专门针对iPhone 5和iPhone 5格局，试图一次找出一个屏幕尺寸问题，但没有任何作用。我查看了我的CSS，无法弄清楚我错过了什么。目前，我回到了我最初的尝试......

#mobilefix {
   display:none;
}
@media screen and (max-width : 854px) {
   #mobilefix {
      display:block;
   }
}  

这是我的测试网站： http://www.taggrafx.com/testing/ChowCzar/index.html#1

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

Answer 1

您的问题源于您将菜单320px转换为左侧：

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

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

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

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

使用新样式，它就是这样：

Answer 2

...试

<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;
   }
}