当我读到响应式设计时，人们总是会使用以下语句： @媒体屏幕和（最大宽度：）
但是今天的手机似乎具有非常好的分辨率（通常比电脑还高），检测小型设备的最佳方法是什么？
谢谢 ;=)
【问题讨论】：
12in 或 5cm。不过，从未尝试过。 CSS 渲染引擎应该处理获取设备屏幕规格和 DPI 等级的必要工作，并将这些真实世界的单位转换为物理像素测量值
标签： html css mobile media tablet
屏幕分辨率无关紧要。媒体查询中使用的值是设备宽度。例如：
我的手机的屏幕分辨率为 1280x720 像素。竖直放置时（纵向模式）宽度为 720 像素，但由于它是高清屏幕，因此它具有 200% 的比例，因此得到的设备宽度为 360 像素。这是媒体查询中使用的值：
/* Even though my phone has a screen width of 720px… */
@media screen and (max-width: 360px) {
/*
* This code will apply
*/
}
@media screen and (min-width: 361px) {
/*
* This code will not apply
*/
}
一般规则是纵向模式下的手机的设备宽度小于或等于 400 像素，无论其屏幕包含多少实际像素。
【讨论】：
<link rel="stylesheet" type="text/css" href="css/template.normal.css" media="(min-width: 400px)" /> <link rel="stylesheet" type="text/css" href="css/template.mobile.css" media="(max-width: 400px)" /> 这会在 Xperia 上加载 *normal.css"。我必须将宽度阈值设置为至少 980 像素才能在 Xperia 上加载 mobile.css。
media 属性的支持是什么样的。我使用带有@media at-rules 的单个样式表。
<meta name=viewport content="width=device-width, initial-scale=1">。然后你的规则似乎是正确的。另请参阅“sharklasers”的答案。谢谢。
不能直接查询物理尺寸。
但是，您可以对 DPI 以及高度和宽度执行媒体类型查询。
例子
@media(resolution: 326dpi) and (device-width: 640) and (device-height: 1136) {
// Iphone 5s
}
这应该是一个很好的起点：List of displays by pixel density
【讨论】：
Retina/HD 移动显示器上的物理像素和 CSS 像素不同。
研究视口元标记以获取有关设备宽度的信息。即<meta name="viewport" content="width=device-width"> 是按 100% 缩放的 CSS 像素宽度。
请参阅Viewport Device-Widths 了解常见的移动屏幕尺寸列表。
【讨论】：
当您进行响应式设计时，您实际上并没有“检测”屏幕尺寸，而是使用 CSS 媒体查询“定位”各种尺寸。
例如，如果您使用的是 Modernizer 之类的库，那么您实际上就是在对各种属性进行检测。
【讨论】：