When working on a project, I encountered different effects on large-screen pages displayed on computers with different resolutions. Because there are many different modules in the page, I decided to make different pages and display different paths on computers with different resolutions. How to do it?
One way is to use a separate page as the homepage, let the homepage detect the resolution, and then go to the corresponding page, you can try it, and put the following "page 1", "page 2", "page 3", "Page 4" is changed to your web page without affecting the speed.
Just save the modified file below as a web page.
<!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>The display effect is as follows:
