Brower 屏幕分辨率

1、早先的移动设备中，屏幕像素都比较低，如 Iphone3 分辨率为320×480，一个像素等于一个屏幕物理像素。后来随着设备屏幕像素密度越来越高，从iphone4开始，苹果推出Retina屏，分辨率变成了640×960，提高一倍，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这提高的就是 devicePixelRatio，其它安卓移动设备也类似与此。

2、LayaAir 得出换算公式：物理分辨率 = 像素分辨率 * devicePixelRatio;LayaAir 引擎对它们做了封装：

设备像素分辨率：Laya.Browser.clientWidth，Laya.Browser.clientHeight;
设备物理分辨率：Laya.Browser.width，Laya.Browser.height;
像素比：Laya.Browser.pixelRatio;

（显然平时常用的是：设备物理分辨率 width 与 height ，它们代表着浏览器窗口的实际分辨率）

3、默认从 Brower 获得的 clientWidth、clientHeight 不是像素分辨率，而是经过缩放过的分辨率，想要获得正确分辨率，需要在html 页面内设置 viewport meta 标签，content 属性的值为 ”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no“（LayaAir引擎内，如果页面未设置viewport标签，则引擎会自动生成一个，以确保获取的正确宽高）

//初始化引擎-让舞台大小与屏幕大小一致
Laya.init(Laya.Browser.width, Laya.Browser.height,Laya.WebGL);

//创建一个文本对象，用于显示手机旋转时的陀螺仪数据
let infoText = new Laya.Text();
infoText.fontSize = 70;//字体大小70px
infoText.color = "#FFFFFF";//字体颜色白色
infoText.borderColor = "#f00";//文本组件边框颜色为红色
infoText.wordWrap = true;//文本自动换行
//设置文本组件的大小等于整个舞台大小
infoText.size(Laya.stage.width, Laya.stage.height);
Laya.stage.addChild(infoText);//将文本添加到舞台

let showInfo = "width:"+Laya.Browser.width+"、height:"+Laya.Browser.height+"\r\n";
showInfo += "clientWidth:"+ Laya.Browser.clientWidth+"、clientHeight:"+Laya.Browser.clientHeight+"\r\n";
showInfo += "pixelRatio:"+Laya.Browser.pixelRatio;

infoText.text = showInfo;//显示分辨率信息

上图是台式机上使用 Chrome 调试运行的结果：

1）可以看出分辨比 pixelRatio 为 1，即 widht 与 clientWidth 相等，height 同理

2）本人电脑显示器实际分别率为 1920 * 1080，Laya.Browser.xxx 获取的是浏览器窗口占用的部分硬件分辨率，所以当 Chrome 浏览器按 F11 进入全屏模式，然后刷新页面，则 Laya.Browser.widht 就会等于 1024，height 就会等于 1920.

上图是手机上调试运行的结果：

1）可以看出分辨比 pixelRatio 为 3，即 widht 与 clientWidth 相等，height 同理

2）本人手机实际分别率为 1080 * 1920，Laya.Browser.xxx 获取的是浏览器窗口占用的局部分辨率，也就是图中黑色的部分，其余部分并不包含。

关于 Laya.Brower 的更多 API 可以参考：https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Browser#pixelRatio

LayaAir Brower 屏幕适配

Brower 屏幕分辨率

猜你喜欢