Question

当我阅读有关响应式设计的内容时，人们总是会使用此声明： @media screen和（max-width：）

但今天的手机似乎具有非常好的分辨率（通常超过个人电脑），这是检测小型设备的最佳方式吗？

Thx; =）

Answer 1

屏幕分辨率无关紧要。媒体查询中使用的值是设备宽度。例如：

我的手机屏幕分辨率为1280x720像素。当竖直（纵向模式）时，宽度为720px，但由于它是高清屏幕，因此它具有200％的比率，并且所得到的设备宽度为360px。这是媒体查询中使用的值：

/* 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
      */
}

一般规则是纵向模式下的手机设备宽度小于或等于400px，无论屏幕包含多少实际像素。

Answer 2

您无法直接查询物理尺寸。

但是，您可以对DPI执行媒体类型查询以及高度和宽度。

实施例

@media(resolution: 326dpi) and (device-width: 640) and (device-height: 1136) {
   // Iphone 5s
}

这应该是一个很好的起点：List of displays by pixel density

Answer 3

物理像素和CSS像素在视网膜/高清移动显示器上并不相同。

研究视口元标记以获取有关设备宽度的信息。即<meta name="viewport" content="width=device-width">是缩放为100％的CSS像素宽度。

请参阅Viewport Device-Widths以获取常见移动屏幕尺寸列表。

Answer 4

当您进行响应式设计时，您实际上并未“检测”屏幕大小，而是使用CSS媒体查询“定位”各种大小。

如果您正在使用像Modernizer这样的库，那么当您实际检测各种属性时就是这样。

在CSS中检测小型设备（如手机或平板电脑）的最佳方法是什么？

4 个答案: