网页制作——不同分辨率显示不同页面

做项目时,遇到大屏页面在不同分辨率电脑上显示不同的效果。因为页面中模块有很多不同,所以决定做不同的页面,在不同分辨率的电脑上显示不同的路径,怎么做呢?

有一种办法就是让单独的一个页面作为主页,让这个主页检测分辨率,之后转到相应的页面,你可以试一试,把下面的“页面一”、“页面二”、“页面三”、“页面四”改成你的网页,不影响速度。

直接把修改后的下面的文件存储为一个网页即可。

<!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>

显示效果如下:

猜你喜欢

转载自blog.csdn.net/maxue20161025/article/details/128777344