自助推荐

一段测试当前屏幕真实分辨率的网页端代码

1,011 00

网页原本是帮前女友项目中解决测试显示屏和主板是否都是真4K显示而写的，空着也是空着，放出来给有缘人吧，希望能帮到。查看预览

其实真4K需要主板支持4K输出且显示屏（逻辑板）支持4K输入才能真正达到4K显示，这样在开发时候才不会影响最终显示效果。这个网页是个工具，检测是否为真4K的工具。我用不同颜色表示了不同分辨率的显示区域，中间用恩本来直观的显示当前设备分辨率。

下面是完整的网页代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
<title>4K网页布局测试</title>
<style>
body{
	margin:0;
	padding:0;

}
.ftsz {
	text-align:left;
}
div {
	border:1px solid blue;
	box-sizing: border-box;
}
#wh{
	font-size:20px;
	position:absolute;
	background-color:rgba(0,0,0,0.7);
	color:#fff;
	padding:5px;
	border-color:#fff;
}
</style>
</head>
<body style="text-align:center;">

<div style="width:3840px;height:2160px;background-color:yellow;">
	<p class="ftsz">黄色区域为4K显示区域：3840x2160</p>
	<div style="width:1920px;height:1080px;background-color:orange;">
		<p class="ftsz">橙色区域为2K显示区域：1920x1080</p>
		<div style="width:1366px;height:768px;background-color:skyblue;">
			<p class="ftsz">天蓝色区域为笔记本常见显示区域：1366x768</p></div>
	</div>
</div>
<div id="wh">
<script type="text/javascript">
s();
function s()
{
var w= window.screen.width;
var h= window.screen.height;
var t=h/2+"px";
var l=w/2+"px";
document.getElementById("wh").style.top=t;
document.getElementById("wh").style.left=l;
document.write("当前屏幕分辨率为: "+w* window.devicePixelRatio+"x"+h* window.devicePixelRatio);
}
</script>
</div>
</body>
</html>

js代码中关键属性是window.devicePixelRatio，因为某些设备的设备像素比是不一样的，特别是移动端高像素比设备。所以如果简单用window.screen.width和window.screen.height获取屏幕长宽是无法检测到是否是真4K的。因此需要把获取的像素再乘以window.devicePixelRatio。

有兴趣的可以修改代码在多端测试。