javascript获取浏览器页面的最大工作区域，就是我们页面显示的宽度和高度是多少，方便我们布局页面，特别是在移动端时特别需要

原创于 2023-09-16 23:54:43 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

javascript学习日记专栏收录该内容

151 篇文章

订阅专栏

本文介绍了如何使用JavaScript函数getViewport()来获取浏览器页面的最大工作区域，包括宽度和高度，这对于在移动端进行响应式设计和布局至关重要。函数根据浏览器兼容性不同，分别处理了`documentElement`和`body`的尺寸计算。

//获取浏览器页面的最大工作区域，就是我们页面显示的宽度和高度是多少，方便我们布局页面，特别是在移动端时特别需要

 function getViewport(element)
              {
                if(document.compatMode=="BackCompat")
                {
                  return {
                    width:document.body.clientWindow,
                    height:document.body.clientHeight
                  };
                }else
                {
                  return {
                    width:document.documentElement.clientWidth,
                    height:document.documentElement.clientHeight
                  }
                }
              }
//下面的都是最得浏览器最大的宽度和高度，body的是兼容IE浏览器
              var docHeight=Math.max(document.documentElement.scrollHeight || document.body.scrollHeight,document.documentElement.clientHeight || document.body.clientHeight );
              var docWidth=Math.max(document.documentElement.scrollWidth || document.body.scrollWidth,document.documentElement.clientWidth || document.body.clientWidth);
             // console.log(docHeight,docWidth);