获取游览器窗口的大小（window对象）

绝地灬酷狼 2022-06-07 07:27 237阅读 0赞

**window对象获取游览器窗口大小**  
  
window获取窗口的大小在不同浏览器上情况不一样，根据主流的浏览器大致分为以下三种情况。  
注意：浏览器的视口不包括<工具栏>和<滚动条>  
  
**情况一：**  
  
在Internet Explorer(9+)、Chrome、Firefox、Opera 以及 Safari：  
window.innerHeight - 浏览器窗口的内部高度  
window.innerWidth - 浏览器窗口的内部宽度  
示例代码：

<script type="text/javascript">
        var width = window.innerWidth;
        var height = window.innerHeight ;
        console.log("窗口宽度："+width);
        console.log("窗口高度："+height);
    </script>

**情况二：**

对于 Internet Explorer 8、7、6、5：(Chrome和Firefox也支持)  
document.documentElement.clientHeight  
document.documentElement.clientWidth  
示例代码：

<script type="text/javascript">
        var width = document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
        console.log("窗口宽度："+width);
        console.log("窗口高度："+height);
    </script>

**情况三：**

为了兼容浏览器的版本可以使用下面的代码(可以涵盖所有的浏览器)。

示例代码：

<script type="text/javascript">
        var width = window.innerWidth || document.documentElement.clientWidth;
        var height = window.innerHeight || document.documentElement.clientHeight;
        console.log("窗口宽度："+width);
        console.log("窗口高度："+height);
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript窗口大小变化事件：window.resize

1.前言在Web开发中，JavaScript是一种强大的脚本语言，它可以与HTML和CSS一起使用，为用户提供交互性和动态性的体验。其中，window.addEvent

港控/mmm°/ 2024年02月05日 23:40/ 0 赞/ 89 阅读

相关游览器获取用户位置信息，不同游览器获取位置信息不一致

问题游览器获取用户位置信息，不同游览器获取位置信息不一致详细问题对于下述代码 <!DOCTYPE html> <html> <he

墨蓝/ 2023年10月12日 14:44/ 0 赞/ 34 阅读

相关 Appium-Set Window Size(设置窗口大小)

Set Window Size Example Usage Support

小鱼儿/ 2023年01月13日 14:53/ 0 赞/ 148 阅读

相关 Appium-Get Window Size(获取窗口大小)

Get Window Size Example Usage Support

Myth丶恋晨/ 2023年01月13日 14:52/ 0 赞/ 176 阅读

相关 JS获取浏览器窗口/pc端大小

1、获取浏览器窗口大小 window.innerWidth window.innerHight 2、获取PC端大小 var w = window.innerWid

冷不防/ 2022年11月25日 00:39/ 0 赞/ 166 阅读

相关认识Javascript中控制窗口大小的Screen和Window对象

Screen对象存储了客户的电脑屏幕信息，这些信息可以用来探测客户端硬件的基本配置 Screen对象的基本属性： availHight:显示Web浏览器的屏幕可用高度

男娘i/ 2022年08月26日 12:20/ 0 赞/ 179 阅读

相关 window 窗口对象操作

JavaScript中的Window窗口对象是 JavaScript中最大的对象，它描述的是一个浏览器窗口。一般要引用它的属性和方法时，不需要用“ window.xxx”

青旅半醒/ 2022年08月25日 05:18/ 0 赞/ 202 阅读

相关 windows窗口对象（历史）

windows窗口对象（历史）主要有三个 history.go(),history.back(),history.forward()。因为windows对

旧城等待，/ 2022年06月11日 00:55/ 0 赞/ 194 阅读

相关获取游览器窗口的大小（window对象）

window对象获取游览器窗口大小 window获取窗口的大小在不同浏览器上情况不一样，根据主流的浏览器大致分为以下三种情况。注意：浏览器的视口不包括<工具栏>

绝地灬酷狼/ 2022年06月07日 07:27/ 0 赞/ 238 阅读

相关 JavaScript的BOMwindow对象之窗口大小（四）

跨浏览器确定一个窗口的大小不是一件简单的事。 IE9+、Firefox、Safari、Opera和Chrome均为此提供了4个属性：innerWidth、innerHeig

àì夳堔傛蜴生んèń/ 2022年02月05日 02:47/ 0 赞/ 214 阅读