为什么响应式网页设计在具有相同分辨率但不同ppi的屏幕上响应不同？ [英] Why responsive web design respond differently on screens that have the same resolution but different ppi?

问题描述

使用媒体查询时，您可以设置min-width属性和设计，但我使用我的桌面和我的手机进行测试。我的手机分辨率是1080p，与我的桌面显示器相同，但设计在两个屏幕上的反应不同。它应该表现相同不应该吗？我缺少什么？

When using media queries you can set the min-width property and design accordingly but I'm testing using both my desktop and my mobile phone. My phone resolution is 1080p, the same as my desktop monitor however the design respond differently on both screens. It should behave the same shouldn't it? What am I missing? Why do they behave differently if I'm only using pixels?

推荐答案

因此，结果是一个 CSS像素与硬件像素不同。

So it turns out a CSS pixel is different from a hardware pixel.

CSS规范说：

如果输出设备的像素密度为非常不同于典型的计算机显示器的
，用户代理应该重新缩放像素
的值。建议像素单元参考最接近参考像素的设备像素的整个
数。它
建议参考像素是设备上像素密度为96dpi的设备上的一个
像素的视角，以及距离手臂长度的读者的
的距离。

If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

这是一个很好的阅读：
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

This is a good read: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

这篇关于为什么响应式网页设计在具有相同分辨率但不同ppi的屏幕上响应不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！