css - 媒体查询在 Iphone 上不起作用，但在浏览器调整大小时很好

Question

嗨，我目前在 WordPress 上使用名为 Bones 的 Boilerplate 主题，但我无法让响应式菜单在我的 Iphone 上工作。当我手动调整菜单大小时似乎工作

我使用的媒体查询是

@media only screen and (min-width: 960px) {

我试图开始工作的网站在这里：链接

任何帮助将不胜感激，因为我已经去找了主题作家，但他已经好几天没有回复了

Answer 1

你使用过元视口对象吗？把它放在文件的开头

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

Answer 2

我刚刚遇到一个问题，当我用这个加载我的样式表时：

<link src="mobile.css" media="only screen and (min-width: 400px)" />

然后在里面mobile.css，我有几个这样的风格：

@media screen and (min-width: 400px) {
    body {
        background: red;
    }
}

h1 {
    color: blue;
}

并且一些设备（iPhone、iPad - 当然有不同的断点和 Galaxy Nexus）没有看到background:red;规则（“嵌套”媒体查询），只有那些在“内联”媒体查询（h1）之外的设备。然而，Chrome 和其他浏览器都很好。

Answer 3

这让我很奇怪：

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
    ... 
}

我相信应该是

@media only screen and (max-width: 480px), 
@media only screen and (max-device-width: 480px) { 
    ... 
}

或者...

@media only screen and (max-width: 480px) and (max-device-width: 480px) { 
    ... 
}

您可能还想考虑将您的文档类型从 XHTML 迁移到 HTML5。

Answer 4

You need to mention Media like this  for iphone and smartphones

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}