根据不同访问设备跳转到PC页面或手机页面

最新推荐文章于 2023-09-12 17:16:18 发布

liuwenguang__1207

最新推荐文章于 2023-09-12 17:16:18 发布

阅读量1.2w

点赞数 1

分类专栏： web

web 专栏收录该内容

5 篇文章

订阅专栏

本文提供了两种使用JavaScript实现的自适应网页设计方法，可根据访问设备类型（如PC、Android、iOS等）重定向至相应的PC版或手机版页面。第一种方法适用于同一域名下根据不同设备显示不同版本页面的需求；第二种方法则确保无论用户从哪种设备访问，都能自动跳转到适合该设备的网页版本。

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

目前很多网站都是采用了响应式自适应页面的设计了，根据访问设备的不同，显示不同的内容。但是还是会有一些节奏比较慢的网站，还是PC页面和手机PAD页面不同的访问域名。正好我这里有个需要，同一个域名要根据不同的访问设备显示PC页面或者手机页面，这里收集两个比较简洁的方法，都是通过JS代码实现的。

第一个：

<script type="text/javascript">  
var userAgent = navigator.userAgent.toLowerCase();
    var platform;
    if(userAgent == null || userAgent == ''){
        platform = 'WEB' ; 
    }else{
        if(userAgent.indexOf("android") != -1 ){ 
            platform = 'ANDROID';
            location.href = "http://m.kuegou.com/";
        }else if(userAgent.indexOf("ios") != -1 || userAgent.indexOf("iphone") != -1 || userAgent.indexOf("ipad") != -1){ 
            platform = 'IOS';
            location.href = "http://m.kuegou.com/";
        }else if(userAgent.indexOf("windows phone") != -1 ){ 
            platform = 'WP';
            location.href = "http://m.kuegou.com/";
        }else{
            platform = 'WEB' ;
            location.href = "http://www.kuegou.com/";
        }
    }
</script>

直接上代码，修改代码中你的PC页面和手机页面地址即可。

第二个：

这一个是两段代码，分别放到PC页面网页和手机页面网页，实现不同设备访问不同页面都能实现调整，比如电脑访问了手机页面的地址也会跳转到PC页面上来。

首先是放入PC页面的代码：

<script type="text/javascript">  
var url = window.location.pathname;
var wapurl="http://3g.xxx.com"+url

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
    if(window.location.href.indexOf("?mobile")<0){
        try{
            if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
                 window.location.href=wapurl; 
            }else{ 
                window.location.href=wapurl;
            }
        }catch(e){}
    }
}
</script>

下边是放入手机页面的代码：

<script type="text/javascript">  

var url = window.location.pathname;
var pcurl="http://www.xxx.com"+url

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent)==false || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))==false){
    if(window.location.href.indexOf("?mobile")<0){
        try{
            if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)==false){
                 window.location.href=pcurl; 
            }

        }catch(e){}
    }
}
</script>