JavaScript 取得螢幕寬度的方法

本篇介紹如何用 JavaScript 來取得螢幕寬度，JavaScript 可以用 screen.width 取得螢幕寬度，範例如下，

1
2
3
<script type="text/javascript">
  console.log(screen.width); // 螢幕寬度
</script>

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

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

JavaScript 取得螢幕寬度的完整範例如下，

js-get-screen-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-screen-width</title>
  </head>
  <body>
    <p id="demo">Get screen 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 screen width: " + screen.width;
      </script>
  </body>
</html>

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