媒体查询不适用于平板电脑和 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

您的问题源于您将菜单向左转换 320 像素：

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