概述
研发通常拿到的设计稿会有一个基准,web 端一般是 1920 \* 1080,这是最常见的分辨率,如果要做大屏的适配,视觉效果应该是浏览器的全屏下才能达到设计预期。
通常说的 web 端的分辨率,通常是指电脑显示器的分辨率,表示屏幕上的像素点数量,也称**显示分辨率**,这是指屏幕的整个大小,而不是浏览器的大小,因为浏览器可以进行缩放,所以只有当浏览器全屏时,可视区域的大小即`document.documentElement.clientX`和`document.documentElement.clientX`才等于分辨率的大小
说图
上图的示意是:黑色表示电脑显示器或屏幕,绿色框表示浏览器窗口,而灰色框表示浏览器的任意一个盒子元素。
下面说下数字 1-10 分别表示什么,以及如何获得,单位都是`px`
1:分辨率的宽,`window.screen.Width`,
2:分辨率的高,`window.screen.Height`
3:屏幕的实际高度,在非全屏,浏览器窗口的最大化情况下,这个高度等于 `window.outerHeight`, win11 默认电脑任务栏的高度为`48px`ÿ