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

问题描述 投票:1回答:2

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

html css mobile responsive-design media-queries
2个回答
1
投票

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

CSS规范说:

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

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


0
投票

刚受此骚扰。以下代码行

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

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

© www.soinside.com 2019 - 2024. All rights reserved.