为什么我的Android设备上的window.innerWidth比window.screen.width大很多？

Question

我的javascript代码是

var txt = "Screen: " + window.screen.width + " x " + window.screen.height + " px";
txt += "<br/>Window: " + window.innerWidth + " x " + window.innerHeight + " px";

我的笔记本电脑显示

Screen: 1920 x 1080 px
Window: 1920 x 929 px

但是在使用 Chrome 浏览器的移动设备上我得到：

Screen: 412 x 869 px
Window: 980 x 1717 px    

虽然设备有 3040x1440 像素（三星 Galaxy S10），但我没有缩放窗口！

和 Firefox（在同一台手机上）显示：

Screen: 360 x 720 px
Window: 865 x 1517 px

我希望手机上的 screen.width >= window.innerWidth 。

Answer 1

发生这种情况是因为视口通常会阻止扫描整个屏幕，并且不同的浏览器具有不同的视口。

要解决此问题，您可以尝试使用

window.devicePixelRatio

函数计算视口。

var viewportWidth = innerWidth * devicePixelRatio;
var viewportHeight = innerHeight * devicePixelRatio;
var devicePixelRatio = window.devicePixelRatio;
txt += "<br/>Viewport: " + viewportWidth + " x " + viewportHeight + " px";