方法一:使用window.innerWidth获取设备屏幕的宽度
innerWidth属性用于返回设备的宽度,以像素计。
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>如何获取javascript中的设备屏幕宽度?</title> </head> <body style="text-align:center;"> <h1 style="color:green;">获取javascript中的设备屏幕宽度:</h1> <p id="UP" style="font-size: 19px; font-weight: bold;"></p> <button onclick="Fun()">单击此处</button> <p id="DOWN" style="color: green; font-size: 24px; font-weight: bold;"> </p> <!-- Script to display the device screen width --> <script> var el_up = document.getElementById("UP"); var el_down = document.getElementById("DOWN"); el_up.innerHTML = "单击按钮,以获取设备屏幕的宽度"; function Fun() { var width = window.innerWidth; el_down.innerHTML = width + " 像素"; } </script> </body> </html>
效果图:
方法二:使用document.documentElement.clientWidth方法获取设备屏幕的宽度
document.documentElement.clientWidth方法拥有获取浏览器窗口文档显示区域的宽度,不包括滚动条。
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>如何获取javascript中的设备屏幕宽度?</title> </head> <body style="text-align:center;"> <h1 style="color:green;">获取javascript中的设备屏幕宽度:</h1> <p id="UP" style="font-size: 19px; font-weight: bold;"></p> <button onclick="Fun()">单击此处</button> <p id="DOWN" style="color: green; font-size: 24px; font-weight: bold;"> </p> <!-- Script to display the device screen width --> <script> var el_up = document.getElementById("UP"); var el_down = document.getElementById("DOWN"); el_up.innerHTML = "单击按钮,以获取设备屏幕的宽度"; function Fun() { el_down.innerHTML = document.documentElement.clientWidth + " 像素"; } </script> </body> </html>
效果图:
以上就是如何使用JavaScript获取设备屏幕的宽度?的详细内容,更多请关注0133技术站其它相关文章!