window.screen、document.documentElement 宽度高度测试

作者:vkvi 来源:ITPOW(原创) 日期:2021-1-12

代码:

var s = "screen width x height: " + window.screen.width + " x " + window.screen.height;
s += "\r\n";
s += "documentElement width x height: " + document.documentElement.clientWidth + " x " + document.documentElement.clientHeight;

alert(s);

在某手机中效果如下:

window.screen、document.documentElement 宽度高度测试

 在 Chrome 电脑中效果如下:

window.screen、document.documentElement 宽度高度测试

 在 Firefox 电脑中效果如下:

window.screen、document.documentElement 宽度高度测试

 可以看出:

screen 宽度和高度:

  • 手机中是浏览器分辨率,而不是屏幕分辨率。

  • 电脑中是显示器分辨率。

documentElement 宽度和高度:

  • 都是指内容的宽度和高度,不过在手机里,不做分辨率折算了。

  • 关于高度,可以看到 Chrome 与 Firefox 不同。这到底是指可视区域的高度,还是内容高度呢,如何让 Firefox 向 Chrome 靠拢呢?指定 <!DOCTYPE html>,此时在 Firefox 中,也有高度了。

在线测试:

无 DOCTYPE:http://www.itpow.com/c/2021/01/13101/1.htm

有 DOCTYPE:http://www.itpow.com/c/2021/01/13101/2.htm

相关文章