<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>数据可视化大屏尺寸测试工具</title>
<script type="text/javascript" src="js/jquery2.1.4.js"></script>
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<!--大屏主体-->
<div class="mainbox">
<ul>
<!--左侧指标-->
<li>
<div class="boxall" id="v1" style="height:300px;background-color: blueviolet;">
<p id="v4_1"></p>
<p id="v1_1"></p>
<p id="v4_2"></p>
</div>
<div class="boxall" id="v2" style="height:200px;background-color: brown;"></div>
<div class="boxall" id="v3" style="height:220px;background-color: blueviolet;"></div>
</li>
<li>
<div class="boxall" style="height:720px;background: #0066cc;text-align: center;" id="v7_1">
<p id="v4"></p>
<p id="v7"></p>
</div>
</li>
<!--右侧指标-->
<li>
<div class="boxall" id="v5" style="height:300px;background-color: blueviolet;"></div>
<div class="boxall" id="v6" style="height:420px;background-color: brown;"></div>
</li>
</ul>
</div>
<script>
function getRatio() {
$('#v1_1').html("A区分辨率[W*H]：" + $('#v1').width() + "*" + $('#v1').height());
$('#v2').html("B区分辨率[W*H]：" + $('#v2').width() + "*" + $('#v2').height());
$('#v3').html("C区分辨率[W*H]：" + $('#v3').width() + "*" + $('#v3').height());
$('#v4').html("屏幕分辨率[W*H]：" + window.screen.width + "px * " + window.screen.height + "px");
$('#v5').html("E区分辨率[W*H]：" + $('#v5').width() + "*" + $('#v5').height());
$('#v6').html("F区分辨率[W*H]：" + $('#v6').width() + "*" + $('#v6').height());
$('#v7').html("中心区分辨率[W*H]：" + $('#v7_1').width() + "*" + $('#v7_1').height());
}
//识别分辨率;
getRatio();
window.addEventListener("resize", function () {
getRatio();
});
</script>
</body>
</html>
数据可视化大屏拼接屏开发实录:屏幕分辨率测试工具
141 浏览量
2023-07-28
20:41:38
上传
评论
收藏 30KB ZIP 举报
tools.zip （3个子文件） 
js 
jquery2.1.4.js 82KB css common.css 1KB
index.html 2KB资源评论
漏刻有时
- 粉丝: 2w+
- 资源: 34
