为什么响应式网页设计在具有相同分辨率但不同ppi的屏幕上有不同的响应?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么响应式网页设计在具有相同分辨率但不同ppi的屏幕上有不同的响应?相关的知识,希望对你有一定的参考价值。

使用媒体查询时,您可以相应地设置min-width属性和设计,但我正在使用我的桌面和手机进行测试。我的手机分辨率为1080p,与我的桌面显示器相同,但设计在两个屏幕上的反应都不同。应该表现得一样不应该吗?我错过了什么?如果我只使用像素,他们为什么表现不同?

答案

事实证明,CSS像素与硬件像素不同。

CSS规范说:

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

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

另一答案

刚受此骚扰。以下代码行

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>标签解决它完美的我。

以上是关于为什么响应式网页设计在具有相同分辨率但不同ppi的屏幕上有不同的响应?的主要内容,如果未能解决你的问题,请参考以下文章

响应式设计

响应式布局与自适应式布局有什么不同

响应式设计

iPhone 6 和 6 Plus 响应式断点 [重复]

H5响应式网站的概念

教学篇|响应式网页设计与自适应网页设计的分析