JavaScript 取得瀏覽器寬度的方法

本篇介紹如何用 JavaScript 來取得瀏覽器寬度，JavaScript 可以用 window.innerWidth 取得瀏覽器寬度，範例如下，

1
2
3
<script type="text/javascript">
  console.log(window.innerWidth); // 瀏覽器寬度
</script>

另外以下還有其它幾種常見的寬度，

1
2
3
4
5
<script type="text/javascript">
  console.log(screen.width); // 螢幕寬度
  console.log(document.documentElement.scrollWidth); // 網頁正文全文寬度
  console.log($(window).width()); // jquery 網頁正文全文寬度
</script>

JavaScript 取得瀏覽器寬度的完整範例如下，

js-get-browser-width.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>js-get-browser-width</title>
  </head>
  <body>
    <p id="demo">Get browser width</p>
    <script type="text/javascript">
      //console.log(screen.width); // 螢幕寬度
      console.log(window.innerWidth); // 瀏覽器寬度
      //console.log(document.documentElement.scrollWidth); // 網頁正文全文寬度
      //console.log($(window).width()); // jquery 網頁正文全文寬度

      var demo = document.getElementById("demo");
      demo.innerHTML = "Get browser width: " + window.innerWidth;
      </script>
  </body>
</html>

如果要用寬度來調整網頁的呈現方式的話，可以參考 Bootstrap 的定義，Bootstrap 判斷的解析度斷點以 576(xs)、768(sm)、992(md) 三種大小來分別判斷為手機、平板、電腦三種裝置。

以上就是 JavaScript 取得瀏覽器寬度的方法範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！