移动端与pc端公用一个域名

最新推荐文章于 2025-06-22 18:32:32 发布

原创最新推荐文章于 2025-06-22 18:32:32 发布 · 9.1k 阅读

9 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种通过判断用户代理(UA)来实现设备自适应的网页设计方法，即同一域名下根据不同设备类型加载不同样式的布局。这种方法使得网站能够在PC端和移动端提供最佳用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端与pc端公用一个域名

移动端与pc端采用两种布局和样式，但是公用一个域名。

当在pc端浏览网页时，采用pc端的样式加载页面，当在移动端浏览网页时，则直接跳转到移动端页面，域名不变（设备自适应网页加载的布局和样式）。

在网页加载刚开始，对设备进行自主判断，相应加载移动端或者pc端布局和样式：

对UA进行判断

判断写在页面还没开始加载之前：

<head>
   <meta charset="UTF-8">
    <script>
//        在移动端的页面在上面对加载页面的设备进行判断，如果不为移动设备，则跳转加载pc端样式
        if(!(/(android|iphone|ipad|PlayBook|BB10)/i).test(window.navigator.userAgent)){
            window.location.href = 'http://localhost:8080/web/src/index.html';
        }
    </script>
   <title>Tako</title>
</head>

pc端页面head头中也需要加入设备判断

<script>
//        若设备为移动设备，则跳转加载移动端样式
        if((/(android|iphone|ipad|PlayBook|BB10)/i).test(window.navigator.userAgent)){
            window.location.href = 'http://localhost:8080/phone/src/index.html';
        }
</script>