當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

js 获取浏览器宽度和高度

發布時間：2024/3/13 HTML 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 获取浏览器宽度和高度小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條

）。

對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

??? window.innerHeight - 瀏覽器窗口的內部高度
??? window.innerWidth - 瀏覽器窗口的內部寬度

對于 Internet Explorer 8、7、6、5：

??? document.documentElement.clientHeight
??? document.documentElement.clientWidth

或者

??? document.body.clientHeight
??? document.body.clientWidth

實用的 JavaScript 方案（涵蓋所有瀏覽器）：

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

---------------------完整的例子---------------------
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

x=document.getElementById("demo");
x.innerHTML="瀏覽器的內部窗口寬度：" + w + "，高度：" + h + "。"
</script>

</body>
</html>
注：所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。其他 Window 方法：

??? window.open() - 打開新窗口
??? window.close() - 關閉當前窗口
??? window.moveTo() - 移動當前窗口
??? window.resizeTo() - 調整當前窗口的尺寸

總結

以上是生活随笔為你收集整理的js 获取浏览器宽度和高度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：使用OpenCV实现运动背景的重建
下一篇： js 如何获取浏览器的高度和宽度