视口分辨率(CSS规则)
这是设计师和开发人员最感兴趣的分辨率,因为它决定了断点和媒体查询的定义。通常只讨论此分辨率。
关于 Xiaomi Redmi Note 7,它是:
- 393 像素 宽度
- 851 像素 高度 ⚠️ 高度仅供参考,因为Safari、Chrome等浏览器会减少可见区域
ℹ️ 某些分析工具仅显示制造商分辨率(如下),而不显示上面显示的分辨率,因此在解释结果时请注意。
即将在模拟器中提供
通过浏览器扩展在类似模型上测试您的响应式网站。
免费且可在两次点击中激活。
像素密度
在 Xiaomi Redmi Note 7 上,它是 2.75
如果您希望在CSS中针对至少具有此像素密度的设备,可以使用此媒体查询。
@media only screen and (-webkit-min-device-pixel-ratio: 2.75) {
/* CSS */
}
同样在JavaScript中,可以获取像素密度的值。
window.devicePixelRatio
// 这将返回数字 2.75
制造商分辨率 Xiaomi Redmi Note 7
鉴于像素密度,这给出:
- 1080 宽度像素
- 2340 高度像素