如何通过HTML获取屏幕、浏览器和页面的大小？
您可以使用JavaScript和HTML来获取有关屏幕、浏览器和页面大小的信息。以下是一些常用的方法：
- 获取浏览器窗口的宽度和高度：
window.innerWidth; // 浏览器窗口的宽度
window.innerHeight; // 浏览器窗口的高度- 获取页面文档的宽度和高度：
document.documentElement.offsetWidth; // 页面文档的宽度
document.documentElement.offsetHeight; // 页面文档的高度- 获取屏幕分辨率：
window.screen.width; // 屏幕宽度
window.screen.height; // 屏幕高度以下是一个HTML和JavaScript结合的示例，展示如何获取并显示这些值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Size Example</title>
<script>
function displaySizes() {
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var documentWidth = document.documentElement.offsetWidth;
var documentHeight = document.documentElement.offsetHeight;
document.getElementById('screen-width').textContent = screenWidth;
document.getElementById('screen-height').textContent = screenHeight;
document.getElementById('window-width').textContent = windowWidth;
document.getElementById('window-height').textContent = windowHeight;
document.getElementById('document-width').textContent = documentWidth;
document.getElementById('document-height').textContent = documentHeight;
}
</script>
</head>
<body onload="displaySizes();">
<p>Screen Width: <span id="screen-width"></span></p>
<p>Screen Height: <span id="screen-height"></span></p>
<p>Window Width: <span id="window-width"></span></p>
<p>Window Height: <span id="window-height"></span></p>
<p>Document Width: <span id="document-width"></span></p>
<p>Document Height: <span id="document-height"></span></p>
</body>
</html>在这个示例中，页面加载(onload)时，displaySizes函数被调用，获取并显示各种尺寸信息。这些信息会被插入到具有相应id的<span>标签中。
评论已关闭