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

最新推荐文章于 2024-03-01 22:00:37 发布

原创

最新推荐文章于 2024-03-01 22:00:37 发布 · 601 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #服务器 #java

项目实践中，面对不同分辨率设备，为保证显示效果，采用首页检测分辨率并跳转对应页面的方法。通过创建一个主页来判断屏幕尺寸，然后重定向到适合的页面，如‘页面一’、‘页面二’等。这种方法既能解决显示问题，又不会影响页面加载速度。

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

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

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

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