搜索 用户中心
  • 欢迎光临三九网站目录 , 快审50元/站,快审请联系站长QQ:704918986
    当前位置 首页 > 教程收藏 > 其它教程
    根据访问设备自动识别展示手机站或PC站的方法
        发布时间:2015-11-05 18:37:31    发布作者:admin

    很多人都想实现这样一个功能:在电脑上输入域名访问的是PC端的网站,而在手机或者平板电脑等移动设备上输入域名是访问的一个手机网站,而且PC端网站和手机移动端的网站是不一样的,当然手机移动端的网站是简化的,和微信的微网站一样的,很简洁的。JU8三九网站目录

    比如:我的网站已经建好了,现在又建了一个手机网站,怎么才能访问同一个域名下让网站自动识别设备,比方说用电脑上进入官网,用移动设备自动进入手机站点,这样就实现了,手机网站和PC网站使用同一个域名,不同的设备访问的时候,看到的是各自的网站。JU8三九网站目录

    1、在网站head标签里加跳转语句JU8三九网站目录

    要实现网站根据访问设备自动识别展示手机站或PC站这个功能,需要以下几个步骤:JU8三九网站目录

    (1)、你得有一个PC端,在电脑上访问的官方网站,比如:www.mahaixiang.cn。JU8三九网站目录

    (2)、你需要重新制作一个移动端的手机网站(具体可查看马海祥博客《手机网站制作的常用方法及优化技巧》的相关介绍),比如:m.mahaixiang.cn。JU8三九网站目录

    (3)、在PC端的网站上加上一段代码,每个页面都需要加上,放在PC端网站head标签里面,代码如下:JU8三九网站目录

    //平台、设备和操作系统
    var system = {
    win: false,
    mac: false,
    xll: false
    };
    //检测平台
    var p = navigator.platform;
    system.win = p.indexOf(“Win”) == 0;
    system.mac = p.indexOf(“Mac”) == 0;
    system.x11 = (p == “X11″) || (p.indexOf(“Linux”) == 0);
    //跳转语句
    if (!(system.win || system.mac || system.xll)) {//转向电脑界面
    window.location.href = “http://m.mahaixiang.cn”;
    }JU8三九网站目录

    (4)、进入域名解析系统,做一个别名cname解析,比如:你手机网站制作公司给的地址123.域名.com解析到m.mahaixiang.cn域名解析系统。JU8三九网站目录

    2、根据移动终端和浏览器版本信息判定的语法JU8三九网站目录

    还有一些站长或SEO可能会考虑到移动终端的版本和浏览器版本信息,对此,马海祥也为大家整理了一段比较有效的代码,如下所示:JU8三九网站目录

    <script type="text/javascript">
     var browser={
        versions:function(){
               var u = navigator.userAgent, app = navigator.appVersion;
               return {//移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
                    ios: !!u.match(/i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                    iPhone: u.indexOf('iPhone') > -1 || (u.indexOf('Mac') > -1 && u.indexOf('Macintosh') < 0), //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
                };
             }(),
             language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }
    if (browser.versions.ios||browser.versions.android||browser.versions.iPhone||browser.versions.iPad) {
     self.location=http://www.mahaixiang.cn;
    }
    </script>JU8三九网站目录

    3、自动识别手机页面、iPad页面和wap页面JU8三九网站目录

    可以根据不同的终端类型适当的改变正则表达式,这段代码添加到需要识别的网页,会根据客户端的类型自动跳转到手机页、平板页或其他移动设备页面,非常的灵活!JU8三九网站目录

    <script type="text/javascript">
    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="http://www.mahaixiang.cn/m";
                }else if(/iPad/i.test(navigator.userAgent)){
                    window.location.href="http://www.mahaixiang.cn/pad";
                }else{
                    window.location.href="http://www.mahaixiang.cn/wap"
                }
            }catch(e){}
        }
    }
    </script>JU8三九网站目录

    4、使用PHP语言来识别JU8三九网站目录

    对于一些精通PHP语言的博友来说,也可以通过PHP语法来实现,比如以下的写法:JU8三九网站目录

    //设定Mobile的定义
    $mobileAgent = array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
    //读取用户的浏览器资料
    $browser = $_SERVER['HTTP_USER_AGENT'];
    $isMobile = false;
    //检查开始
    foreach($mobileAgent as $search){
        if(stristr($browser,$search)!=false){
            $isMobile = true;
            //echo $search;
            //程式码(转址)
            header("Location: http://www.mahaixiang.cn/m/index.html");
            //停止运行程序
            exit;
        }
    }
    ?>JU8三九网站目录

    5、做个自动识别的效果JU8三九网站目录

    经过多次测试,我们也可以做个自动识别的效果,方法很简单,在你需要自动跳转的页面加入以下代码:JU8三九网站目录

    <script type="text/javascript">
    var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
    var browser = navigator.userAgent.toLowerCase();
    var isMobile = false;
    for (var i=0; i<mobileAgent.length; i++){ if (browser.indexOf(mobileAgent[i])!=-1){ isMobile = true;
    //alert(mobileAgent[i]);
    location.href = 'http://siteapp.baidu.com/webapp/mahaixiang.cn#m/http://mahaixiang.cn/';
    break; } }
    </script>JU8三九网站目录

    6、自动识别移动端适配跳转网址的代码JU8三九网站目录

    手机版的网站需要简单,以文字为主,才能很好的兼容,可以在网站的首页设置一个程序来判断用户是手机端还是电脑,如果是手机端,直接中转到手机端,如果是电脑端,直接中转到电脑端(大家也可以使用百度提高的百度移动搜索开放适配服务,具体可查看马海祥博客《百度移动搜索开放适配服务的3种方法》的相关介绍)。JU8三九网站目录

    对此,大家可以在网站的首页插入入下代码:JU8三九网站目录

    <script type="text/javascript">  
    function browserRedirect() {  
    var sUserAgent = navigator.userAgent.toLowerCase();  
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";  
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";  
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";  
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";  
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";  
    var bIsAndroid = sUserAgent.match(/android/i) == "android";  
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";  
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";  
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){  
    window.location.href=B页面; 
    }
    } 
    browserRedirect(); 
    </script>
    <script type="text/javascript">uaredirect("<A href='http://www.mahaixiang.cn/wap/","http://www.mahaixiang.cn/index.html");http://www.mahaixiang.cn/wap/","http://www.mahaixiang.cn/index.html");
    </script>JU8三九网站目录

    在马海祥看来,PC版网页自动识别手机客户端并跳转,用js进行判断是否手机客户端进行跳转最好,特别是静态网页,把这个过程通过js的方式放在用户客户端执行,可以大大减少服务器端额外处理的压力,但是有时需要通过在服务器端进行判断的情况除外。JU8三九网站目录


    JU8三九网站目录

    最新资讯
    最新收录
    热门资讯