为什么响应式网页设计在分辨率相同但 ppi 不同的屏幕上响应不同？答案

【问题标题】：Why responsive web design respond differently on screens that have the same resolution but different ppi?为什么响应式网页设计在分辨率相同但 ppi 不同的屏幕上响应不同？
【发布时间】：2013-09-17 13:20:07
【问题描述】：

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

【问题讨论】：

您是否使用相同的视口元标记？
我实际上没有使用任何东西：\
你应该尝试使用
不，这绝对不是个好主意...

标签： html css mobile responsive-design media-queries

【解决方案1】：

因此，CSS 像素 与硬件像素 不同。

CSS 规范说：

如果输出设备的像素密度与那个相差很大对于典型的计算机显示器，用户代理应该重新缩放像素价值观。建议以像素为单位参考整体最接近参考像素的设备像素数。它建议参考像素为一个人的视角像素密度为 96dpi 且距离一臂之力的读者。

【讨论】：

【解决方案2】：

只是被这个刺痛了。下面这行代码

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

在<head> 标签中为我完美解决了这个问题。

【讨论】：