16

我一直在尝试在我的 CSS 文档中进行媒体查询，执行以下操作：

@media screen and (max-device-width: 480px) { /*css here*/}

但是当我在 iPhone 上测试它时它不起作用。我尝试更改尺寸并使用纵向/横向功能，但仍然没有。我究竟做错了什么？

4

6 回答 6

82

检查您是否有

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

在你的文档的头

于 2013-08-13T10:52:41.080 回答
12

当我在 HTML 的头部链接 CSS 时，我总是调用我的。

我正在处理的当前页面的示例：

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />

这会选择从一开始就加载的 CSS 文档，而不是在加载 CSS 文档后选择样式（减少 HTTP 请求的数量）

在 CSS 文档本身中执行此操作时，通常应替换max-device-width为max-width.

于 2013-08-13T10:50:08.320 回答
6

使用"max-width"而不是"max-device-width"每个设备是固定的。

于 2013-08-13T10:50:00.627 回答
6

这是一个示例媒体查询 css

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
your css here
}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
your css here
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
your css here
}

很难理解，因为您没有提供代码..但是人们通过不添加此元数据来做到这一点的常见错误

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2013-08-13T10:51:53.247 回答
0

我不确定，但我认为max-device-widthiphone 是 640px。试试看。

于 2013-08-13T10:50:06.383 回答
0 
@media only screen and (min-width : 480px) {

}

它似乎在 Android 和 iPhone 上都能正常工作。

于 2013-08-13T10:50:47.983 回答