做项目时,遇到大屏页面在不同分辨率电脑上显示不同的效果。因为页面中模块有很多不同,所以决定做不同的页面,在不同分辨率的电脑上显示不同的路径,怎么做呢?
有一种办法就是让单独的一个页面作为主页,让这个主页检测分辨率,之后转到相应的页面,你可以试一试,把下面的“页面一”、“页面二”、“页面三”、“页面四”改成你的网页,不影响速度。
直接把修改后的下面的文件存储为一个网页即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不同分辨率显示不同页面问题</title>
<script>
function redirectPage() {
var url1360x768 = "页面一";
var url1920x1080 = "页面二";
var url2560x1440 = "页面三";
var url="页面四"
if ((screen.width == 1360) && (screen.height == 768))
window.location.href = url1360x768;
else if ((screen.width == 1920) && (screen.height == 1080))
window.location.href = url1920x1080;
else if ((screen.width == 2560) && (screen.height == 1440))
window.location.href = url2560x1440;
else window.location.href = url;
}
</script>
</head>
<body onload="redirectPage()">
……
</body>
</html>
显示效果如下: