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

网页原本是帮前女友项目中解决测试显示屏和主板是否都是真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。

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

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:蓝色创想 » 一份测试当前屏幕分辨率的网页端代码

分享到: 生成海报
本站源码仅供学习交流,如需商用请在官方购买正版。技术服务为增值服务。如有问题看联系站长QQ:1305675066

评论 抢沙发

实践是学习的最佳途径

了解更多联系我们
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活