<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>浏览器视口大小检查</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// 浏览器加载时
$(document).ready(function(e) {
showViewportSize();
});
// 浏览器窗口缩放时
$(window).resize(function(e) {
showViewportSize();
});
function showViewportSize() {
var the_width = $(window).width();
var the_height = $(window).height();
$('#width').text(the_width);
$('#height').text(the_height);
}
</script>
<h1>视口大小</h1>
<h2>视口 Width:</h2>
<p id="width">Resize to find out!</p>
<h2>视口 Height:</h2>
<p id="height">Resize to find out!</p>
</body>
</html>
检查浏览器视口大小
最新推荐文章于 2022-02-11 10:44:42 发布