Question

你好我正在使用一个名为Bones的Boilerplate主题在WordPress上，但我在使我的Iphone上的响应式菜单工作时遇到了问题。当我手动调整菜单大小似乎工作

使用的媒体查询是

@media only screen and（min-width：960px）{

我尝试上班的网站就在这里：link

任何帮助都会非常感激，因为我去了主题作家并且他几天没有回应

Answer 1

您是否使用过meta viewport对象？把它放在你的文件的头部

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

Answer 2

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 */
}

Answer 3

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

<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;规则（“嵌套”媒体查询），只有那些在外面的 of“inline”媒体查询（h1）。不过，Chrome和其他浏览器都很好用。

Answer 4

这对我来说很奇怪：

@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) { 
    ... 
}

您可能还想考虑从您的doctype转换到HTML5。

媒体查询不在Iphone上工作但在浏览器调整大小时很好

4 个答案: