媒体查询不适用于最大宽度屏幕尺寸（640 像素）答案

【问题标题】：Media query not working with max-width screen size (640px)媒体查询不适用于最大宽度屏幕尺寸（640 像素）
【发布时间】：2014-05-03 05:28:21
【问题描述】：

如果屏幕尺寸为 640 像素或更小，我将做出响应式更改布局。有人告诉我这是大多数智能手机（例如 iPhone）所需的尺寸。但是，当我在 3 款不同的智能手机（包括 iPhone 5s）上测试该网站时，它仍然显示桌面网站。只有当我将最大宽度更改为 980px 时，它才会在移动设备上显示移动变体。

这是因为移动设备的尺寸实际上是 980px，还是因为我做错了媒体查询（我是新手）？我的 HTML 中的查询是否需要任何代码？

这是我的 CSS 中的媒体查询：

@media handheld, screen and (max-width: 640px)

这是我的 HTML 头部中的链接：

<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>

=======================更新======================

感谢您的回答。我错过了元标记并添加了修复它（我是媒体查询的新手）。它工作了一段时间，但我在 CSS 和 HTML 中都添加了一些东西，现在它不再工作了。

这次我将包含一个指向已上传网站的链接。任何其他提示也将不胜感激，因为我刚接触网页设计大约 4 个月。

http://ajhill.esy.es/

【问题讨论】：

这里没有太多代码可看，但是您是否尝试过在 HTML 中添加 viewport 元标记？ <meta name="viewport" content="width=device-width, initial-scale=1.0">

标签： html css mobile screen media

【解决方案1】：

试着把你的代码放在一个 jsfiddle 中，这样我们就可以看到哪里出了问题。

除了试试这个

@media handheld and (max-width: 640px), screen and (max-width: 640px) {

//your css here

}

而不是@media handheld, screen and (max-width: 640px)，看看是否有什么不同。

【讨论】：