電腦端與手機端網站終端的制作方式與判斷跳轉方法

現在做網站早就離不開手機端了，幾乎90%以上的網站都有手機端，甚至部分網站 只提供手機端頁面。對于兩個用戶終端，我們有兩種不同的處理方式：

一、用自適應搭建PC端和手機端（手機端和電腦端統一）

自適應指的是用css來控制頁面樣式，讓頁面布局滿足不同分辨率的需求，其html代碼是完全一致的，只是根據分辨率的不同給予了不同的css樣式。

優點：

1、可以少寫很多代碼：就一套程序滿足用戶的不同需求。

2、優化可同時影響電腦端和手機端排名

缺點：

1、代碼冗余：因為電腦端和手機端用的其實都是一套html，只是被css改變了樣式（如顯示位置、顯示或隱藏等等）。

2、響應速度受影響：同樣的原因，因為是一套html，所以其調用的圖片等資源都是適合電腦展現的，而在手機上也是如此。比如banner圖片，電腦端可能是1920*600，手機端同樣使用該圖片，這樣就需要下載該圖片，導致手機端的資源浪費很大，速度受影響。

3、一旦優化出現問題將同時影響電腦端和手機端排名

做法：

html部分這里就不講了，主要用到css的媒體查詢，簡單示例如下，如果想要詳細了解，請關注本站后續更新。

.wrap{ width: 1200px; margin: 0 auto;}
@media screen and (max-width:800px){
    //當最大寬度小于800px時
    .wrap{ width: 98%;}
}

二、分別建立兩套前端程序（手機端和電腦端分離）

就是兩套前端程序，就相當于有兩個網站（與真正的兩個網站不同的是，這兩個網站用同一個后臺進行管理）。而這種做法又有兩種不同的表現形式：

1、采用欄目架構的形式

也就是把手機端作為電腦端的一個欄目頁面來進行處理，在過去的很多年直到現在都還有這種方式，其形式大致為：www.kredytypozyczki.net(電腦端) www.kredytypozyczki.net/mobile/(手機端)

優點：只需要一個空間（虛擬主機），所有資源的調用都可以使用相對路徑來處理，管理與維護相對方便。

缺點：手機端的優化相對較難（因其只是電腦端的一個欄目）；不能很好地單獨推廣手機端，尤其是sem的時候，百度就要求手機端和電腦端是完全分離的。

2、使用獨立域名或二級域名

這個更像是獨立的網站，兩個終端之間看上去沒有什么從屬關系。事實上不是，一般以電腦端為主站，手機端在調用資源的時候調用的是電腦端的。其表現形式大概是這樣：www.kredytypozyczki.net(電腦端) m.gake.com.cn(手機端)

優點：完全獨立，排名互不影響，相對于欄目架構的形式更容易優化。

缺點：看程序架構，有可能需要兩個獨立的空間（虛擬主機）來存放不同的程序。

做法

沒什么特別的技術含量，就是用兩套前端模板做兩個前端而已。需要注意的是，如果你的電腦端和手機端是完全分離（不是存放在同一個空間內），那么手機端的資源需要調用電腦的，比如產品圖片，同樣需要調用電腦端的，也就是需要用到絕對路徑，如：http://www.kredytypozyczki.net/upfiles/2020-02-01/20200201202822_50946.png。除此之外，網站中文章的配圖也需要使用絕對路徑，也就是文章中插入的圖片應該也類似于這樣：http://www.kredytypozyczki.net/upfiles/2020-01-25/20200125215806_41440.png，而不是/upfiles/2020-01-25/thumb_20200125215806_41440.png。

另外，后臺部分你可能需要增加對應的接口，如banner最好提供pc端和手機端兩種圖片格式、產品圖片最好能生成縮略圖，一則是欄目頁面調用，二則是手機端調用可以提高相應速度。

三、獨立的手機端和電腦端如何進行判斷并返回合適的頁面給用戶？

這里有兩種方式，一是Javascript進行判斷，一是php進行判斷，二者都是以useragent來進行的，推薦使用后者。

1、Javascript判斷用戶是否通過移動終端訪問網站：在用戶訪問到頁面的時候進行檢測，并進行跳轉。因為js是客戶端腳本，所以這端代碼是在客戶端執行的，也就是用戶在訪問電腦端的時候執行，其過程是這樣：用戶訪問電腦端地址 > 后臺程序進行響應并把相關數據發送到用戶終端 > 程序判斷是否手機端訪問，如果是 > 跳轉到手機端地址 > 后臺響應請求并給出移動端數據。

function browserRedirect(){
    //判斷用戶是否用移動設備訪問的Javascript函數
    var sUserAgent=navigator.userAgent.toLowerCase();
    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(bIsIphoneOs||bIsMidp||bIsUc7||bIsUc||bIsAndroid||bIsCE||bIsWM){
        //如果useragent中匹配到以上內容則為手機端
        return true
    }else{
        //如果useragent中沒有以上內容則為電腦端
        return false
    }
}
var url=document.location.href;
if(browserRedirect()){
    //電腦端用 如果檢測為手機端則跳轉到手機端地址，注意這里的調整方式可能需要根據你的實際情況進行調整
    top.location.href=url.replace('//www.','//m.');
}
if(!browserRedirect()){
    //手機端用 如果檢測不是手機端則跳轉到電腦端地址
    top.location.href=url.replace('//m.','//www.');
}

2、php判斷用戶是否通過移動終端訪問網站：在服務器端進行判斷，并給出用戶對應的數據。其執行過程是這樣：用戶訪問電腦端地址 > 后臺判斷其是否移動端設備訪問，如果是 > 給出移動端數據并跳轉到移動端地址。由二者的執行過程，你就能看出來，php判斷少了一次數據請求，其性能更優。

function isMobile(){
    //判斷用戶是否用移動設備訪問的php函數
    $_SERVER['ALL_HTTP'] = isset($_SERVER['ALL_HTTP']) ? $_SERVER['ALL_HTTP'] : '';
    $mobile_browser = '0';
    if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|iphone|ipad|ipod|android|xoom)/i', strtolower($_SERVER['HTTP_USER_AGENT']))){$mobile_browser++;}
    if((isset($_SERVER['HTTP_ACCEPT'])) and (strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') !== false)){$mobile_browser++;}
    if(isset($_SERVER['HTTP_X_WAP_PROFILE'])){$mobile_browser++;}
    if(isset($_SERVER['HTTP_PROFILE'])){$mobile_browser++;}
    $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
    $mobile_agents = array(
        'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
        'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
        'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
        'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
        'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
        'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
        'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
        'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
        'wapr','webc','winw','winw','xda','xda-'
        );
    if(in_array($mobile_ua, $mobile_agents)) $mobile_browser++;
    if(strpos(strtolower($_SERVER['ALL_HTTP']), 'operamini') !== false) $mobile_browser++;
    if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'windows') !== false)  $mobile_browser=0;
    if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'windows phone') !== false) $mobile_browser++;
    if($mobile_browser>0)  return true;
    else return false;
}
if(isMobile()){
    //電腦端用 如果檢測為手機端則跳轉到手機端地址，注意這里的跳轉方式可能需要根據你的實際情況進行調整
    header('HTTP/1.1 301 Moved Permanently');
    $end=$_SERVER['REQUEST_URI'];
    header('Location: http://m.'.S('conf')['domain'].$end);
    die;
}
if(!isMobile()){
    //手機端用 如果檢測不是手機端則跳轉到電腦端地址
    header('HTTP/1.1 301 Moved Permanently');
    $end=$_SERVER['REQUEST_URI'];
    header('Location: http://www.'.S('conf')['domain'].$end);
    die;
}
//備注：S('conf)['domain']為主域名。

四、如何讓搜索引擎區分手機端和電腦端？

上面的兩個函數都是針對用戶的，能給給予用戶對應的頁面，但對于搜索引擎來說我們不能通過它來實現，所以還需要一些相應的設置。

1、電腦端聲明對應的手機端地址

<link rel="alternate" media="only screen and(max-width: 980px)"  />

2、手機端聲明對應的電腦端地址

<link rel="canonical" href="http://www.kredytypozyczki.net">

3、站長平臺進行移動適配

© 致遠 2020-02-05，原創內容，轉載請注明出錯：電腦端與手機端網站終端的制作方式與判斷跳轉方法