我正在努力掌握响应式设计。我创建了这个媒体查询以满足智能手机的需求
@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？
答案 0 :(得分：2)
使用媒体查询时，您还应使用：
<meta name="viewport" content="width=device-width, initial-scale=1"/>
。
max-width是目标显示区域的宽度，例如浏览器
max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕
答案 1 :(得分：1)
对于大多数设备，屏幕分辨率/显示大小等于视口。台式机和笔记本电脑也是如此，但对于移动设备而言，这可能不是真的!!
许多手机浏览器将网页缩放到更宽的视口宽度，以使其适合屏幕。这有时称为概览模式。这些浏览器允许用户放大并缩放页面以查看他们想要查看的位。例如，虽然设备屏幕的宽度可能为320像素，但视口的宽度可能为980像素。在这种情况下，设计为980px或更低的网页将完全适合屏幕。
不同的移动设备和移动浏览器存在困难，因为它们具有不同的视口大小。以下是一些流行的移动浏览器视口大小的简短列表：
许多手机的像素密度或dpi与桌面72dpi不同，因此设置target-densitydpi = device-dpi是防止因缩放效果导致图像模糊的好主意。 此博客的触敏侧边栏版本的视口元标记为：
height = [pixel_value |设备高度]，
width = [pixel_value |设备宽度]，
initial-scale = float_value，
minimum-scale = float_value，
maximum-scale = float_value，
user-scalable = [yes |没有]，
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | 低DPI]