Question

如果屏幕尺寸为640px或更小，我正在进行响应，这会改变布局。我被告知这是大多数智能手机所需的尺寸（E.G. 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'>

====================== UPDATE ======================

感谢您的回答。我错过了元标记并添加了修复它（我对媒体查询不熟悉）。它工作正常一段时间，但我在CSS和HTML中添加了一些东西，现在它再也没有用了。

这次我将包含上传网站的链接。任何其他提示也将受到赞赏，因为我大约4个月的网页设计。

http://ajhill.esy.es/

Answer 1

尝试使用代码的jsfiddle，以便我们可以看到它出错的地方。

除了试一次

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

//your css here

}

代替@media handheld, screen and (max-width: 640px)，看看它是否有所不同。

媒体查询无法使用最大宽度屏幕尺寸（640像素）

1 个答案: