CSS 基于像素的媒体查询如何与现代智能手机配合使用？
How does CSS media queries based on pixels work with modern smart phones?
考虑一个屏幕分辨率为 1440 x 2960 像素的智能 phone。现在，如果我做一个 CSS 移动查询，比如 @media(max-width: 500px)，那么即使它是一个移动设备，它也不会满足媒体查询。
但确实如此。考虑这个网站 Loruki，它具有相同的最大宽度为 500 像素的媒体查询，但当从 1440 x 2960 设备打开时，它的工作方式就像基于移动的网页。
像素和媒体查询如何工作？
您混淆了 screen resolution 和 screen width
即phone 的屏幕宽度通常在 200 到 500 CSS 像素左右。
这个著名的博客 post 解释了为什么需要介绍这个：a pixel is not a pixel
中等也有an excellent explanatory article on the topic.
对于高分辨率屏幕，so-called device-to-pixel 比率大于 1。要计算 CSS 像素宽度，公式如下：
CSSPixelWidth = DevicePixelWidth / DevicePixelRatio
考虑一个屏幕分辨率为 1440 x 2960 像素的智能 phone。现在，如果我做一个 CSS 移动查询，比如 @media(max-width: 500px)，那么即使它是一个移动设备，它也不会满足媒体查询。
但确实如此。考虑这个网站 Loruki，它具有相同的最大宽度为 500 像素的媒体查询，但当从 1440 x 2960 设备打开时，它的工作方式就像基于移动的网页。
像素和媒体查询如何工作？
您混淆了 screen resolution 和 screen width
即phone 的屏幕宽度通常在 200 到 500 CSS 像素左右。
这个著名的博客 post 解释了为什么需要介绍这个：a pixel is not a pixel
中等也有an excellent explanatory article on the topic.
对于高分辨率屏幕，so-called device-to-pixel 比率大于 1。要计算 CSS 像素宽度，公式如下：
CSSPixelWidth = DevicePixelWidth / DevicePixelRatio