实用的技术支持
屏幕大小、缩放和 CSS 像素
浏览器的屏幕尺寸读数对于支持很有用,但并不总是包装盒上打印的显示规格。
上次审查日期：
屏幕大小和浏览器空间回答不同的问题
显示器可能具有较高的硬件分辨率,而浏览器则报告较小的逻辑屏幕,网站也必须适合实际的浏览器窗口,而实际的浏览器窗口可能比显示器窄得多。 在诊断截断的表单或重叠的按钮之前,请确定您要比较的值。
了解三个主要读数
| 雷丁 | 它描述了什么 | 使用它 |
|---|---|---|
| 屏幕大小,以CSS像素为单位 | 由浏览器的屏幕 API 报告的屏幕尺寸。 | 理解浏览器对显示的视图,但须遵守缩放和隐私行为。 |
| 浏览器窗口,以CSS像素为单位 | 页面的布局视窗,而不是浏览器框架的外部。 | 重现响应式布局问题或比较窗口宽度。 |
| 像素比率 | 当前浏览环境中设备像素和 CSS 像素之间的关系。 | 解释密度和一些缩放效果。 它不是显示器模型或硬件库存。 |
为什么缩放和显示缩放重要
CSS像素是布局单位,而不是每个屏幕像素的承诺。 操作系统缩放和浏览器页面缩放可以改变这些单位与显示的关系。 外部尺寸相同的窗口在更高的页面缩放时可能会减少页面的布局空间。
在触摸设备上,双指缩放不同于普通的页面缩放:它可以放大可视视窗,而不会以同样的方式改变布局视窗。 此检查器报告浏览器的布局值,因此并非每个可见的缩放变化都会改变其窗口号。 布局视窗 和 设备像素比率.
通过一个受控的更改重现布局错误
- 开放 屏幕和窗口检查器 在受影响的浏览器中。
- 记录标记窗口读取、浏览器版本和任何已知的页面缩放。
- 比较更宽的窗口。 如适用,还可比较浏览器的正常页面缩放,但不要删除所需的辅助设置。
- 返回到受影响的页面并重复相同的操作。
例如,如果结账按钮在狭窄的窗口上重叠,但不在更宽的窗口上重叠,请发送两个窗口的读数,这样开发人员就可以从这里开始重现布局。 这并不能证明显示器有故障,也不能证明您应该购买更高分辨率的显示器。
捕获页面的有用部分
剪切后的截图可以显示重叠或缺失的控件。 请包括足够的周围内容来解释重叠或缺失的控件在哪里出现,同时删除姓名、帐户详细信息和私人标签页。 您的审核支持详情.
如果您需要原生显示分辨率
检查操作系统的显示设置和显示器的规格。 将浏览器屏幕读数乘以其像素比率并不是证明面板原生分辨率的可靠方法,特别是在缩放、远程会话、多显示器或隐私控制等情况下。