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

Question

当我阅读有关响应式设计的内容时，人们总是习惯于使用以下语句: @media 屏幕和(最大宽度:)

但如今的手机分辨率似乎非常高(通常超过 pc)，检测小型设备的最佳方法是什么？

谢谢;=)

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

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