获取设备及浏览器等的高度和宽度

最新推荐文章于 2023-10-11 17:37:50 发布

原创最新推荐文章于 2023-10-11 17:37:50 发布 · 7.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#设备宽高 #浏览器

前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用JavaScript来获取网页和浏览器的各种尺寸信息，包括屏幕分辨率、可用工作区域大小、网页可见区域尺寸及其滚动位置等。这些信息对于适配不同设备显示尤为重要。

/*获取设备及浏览器的等的高度和宽度  */
        var height1=window.screen.height;
        var width1=window.screen.width;

        var height2=window.screen.availHeight;
        var width2=window.screen.availWidth;

        var height3=window.screenTop;
        var left3=window.screenLeft;

        var height4=document.body.clientHeight;
        var width4=document.body.clientWidth;

        var height5=document.body.offsetHeight;
        var width5=document.body.offsetWidth;

        var height6=document.body.scrollHeight;
        var width6=document.body.scrollWidth;

        var height7=document.body.scrollTop;
        var left7=document.body.scrollLeft;




        document.write("屏幕的分辨率高度"+height1);
        document.write("<br/>屏幕分辨率宽度"+width1);

        document.write("<br/>屏幕可用工作区域高度"+height2);
        document.write("<br/>屏幕可用工作区域宽度"+width2);

        document.write("<br/>网页正文部分上"+height3);
        document.write("<br/>网页正文部分左"+left3);

        document.write("<br/>网页可见区域高度"+height4);
        document.write("<br/>网页可见区域宽度"+width4);

        document.write("<br/>网页可见区域高度包括边框"+height5);
        document.write("<br/>网页可见区域宽度包括边框"+width5);

        document.write("<br/>网页正文高度"+height6);
        document.write("<br/>网页正文宽度"+width6);

        document.write("<br/>网页被卷去的高"+height7);
        document.write("<br/>网页被卷去的左"+left7+"<br/>");

解释图片
这里写图片描述