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

Question

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

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

我已经尝试了所有我能想到的媒体查询，包括比率、分辨率、最大和最小宽度、最大和最小设备宽度等。如果不是@media 查询问题，那一定是单独的 css 冲突，但我想不通。我可以看到，没有宽度、边距或位置使这个移动菜单显示出来。

我试图专门针对 iPhone 5 和 iPhone 5 landscape，只是试图一次找出一个屏幕尺寸问题，但没有任何效果。我查看了我的 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);
}

这意味着当屏幕宽度大于 320 像素，但小于您的移动/桌面断点时，菜单将显示在距右边缘 320 像素处。

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

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

有了新样式，这就是它的样子: