Question

我正在努力掌握响应式设计。我创建了这个媒体查询以满足智能手机的需求

@media screen and (max-width:500px) {
/* css rules for smartphones */
}

但是，当我查看我的iPhone时，它没有显示这些规则，即使我将浏览器调整到500px以下时规则也适用。所以我在jquery中添加了

width = $(window).width();
$('#info').html(width);

这告诉我，我的iPhone实际上是980px宽，我认为这很奇怪，因为我确信我读的它只有320px宽。所以这会引起很大的混乱。经过大量的游戏后，我似乎已经开始使用它了：

@media screen and (max-device-width:500px) {
/* css rules for smartphones */
}

但我不知道为什么它适用于此，以及我实际做了什么。

有人可以告诉我什么＆＃34;设备＆＃34;手段？为什么iPhone的分辨率为980px根据jquery？

Answer 1

使用媒体查询时，您还应使用：

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

在标题中

。

max-width是目标显示区域的宽度，例如浏览器

max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕

Answer 2

对于大多数设备，屏幕分辨率/显示大小等于视口。台式机和笔记本电脑也是如此，但对于移动设备而言，这可能不是真的!!

许多手机浏览器将网页缩放到更宽的视口宽度，以使其适合屏幕。这有时称为概览模式。这些浏览器允许用户放大并缩放页面以查看他们想要查看的位。例如，虽然设备屏幕的宽度可能为320像素，但视口的宽度可能为980像素。在这种情况下，设计为980px或更低的网页将完全适合屏幕。

不同的移动设备和移动浏览器存在困难，因为它们具有不同的视口大小。以下是一些流行的移动浏览器视口大小的简短列表：

许多手机的像素密度或dpi与桌面72dpi不同，因此设置target-densitydpi = device-dpi是防止因缩放效果导致图像模糊的好主意。此博客的触敏侧边栏版本的视口元标记为：