我已经尝试了各种方法来确定浏览器客户区域的物理像素大小,但我在移动设备上得到了非整数结果。
例如:在带有Chrome的Pixel 2上的window.outerWidth * window.devicePixelRatio
产生1081.5
,尽管我知道浏览器的客户端区域实际上是1080
像素宽。
看到这个的另一种方式是mydevice.io和JS screen.width
与JS pixel-ratio
相乘。
有没有更好的方法来确定物理客户端的大小?
目前没有办法做到这一点,但拟议的ResizeObserver
API可能会在未来实现这一目标。
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The innerWidth and innerHeight properties are not supported in IE8 and earlier.</p>
<p id="demo"></p>
<script>
function myFunction() {
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
}
</script>
如果要排除客户端任务栏,可以使用window.screen.availHeight
和window.screen.availWidth
。
否则,使用window.screen.height
和window.screen.width
。