前言

我們在開發h5的時候需要適配不同的終端，例如：PC，移動端等場景。
那麼我們會有多種方案可以選擇
一：使用css3 判斷不同的終端顯示不同的樣式
1)好處是，只需要維護一套代碼即可，但樣式處理卻非常麻煩，當頁面結構比較複雜的時候，我們沒辦僅僅用css3 根據不同的終端做適配
2)兩套頁面適配不同終端，比如淘寶網就是兩套頁面做適配，根據用户終端，跳轉至不同的頁面，這套方案可以更加靈活的做適配
3)一套頁面，然後兩套樣式+js 判斷當前是哪個類型的終端；

問題

上述三套方案，前面兩種都是客户要求適配移動端，跟手機端的場景下進行初始化的開發的，如果你當前的前端如果只支持PC端，那麼突然有一天，客户要求 增加移動端呢，而且要求快速的輸出版本，那我們該如何解決呢 ，如果使用前兩種方案：
第一種方案：頁面樣式修改複雜，基本上不會考慮
第二種方案：如果時間充裕，基本上會考慮這種方案，而且開發也好解耦，不至於增加大量的維護成本，但開發時間上無疑是要更長一些，可能會滿足不了；

開始

因此，本文只基於第三種情況做講述，也是基於當前自己目前開發的場景做的論述，由於我們的系統原先只支持PC 端展示的，後面客户根據實際應用要求，突然增加移動端的展示，時間上只給一週的時間，如果按正常速度，至少要3周這樣，才能開發好，為了趕時間，我們使用了第三種方案；

步驟：

  • 將PC 端的樣式獨立出來存放到pc 目錄下，然後新建一個mobile 的目錄把也同樣複製一份樣式存放到裏面，其他的公共樣式則不變。
  • 針對性的修改mobile 下的樣式只適配手機端即可。

vue 手機端PC端一體網頁demo_#vue.js

  • 例如
    如下為原有適配PC端的
.cart-icon{
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 999;
}

那麼到這裏我們只需要考慮移動端的樣式即可。

.cart-icon{
    position: absolute;
    bottom: 0.16rem;
    right: 0.1rem;
    z-index: 999;
    width: 0.7rem;
}
  • 上述只是舉個例子，然後我們需要把樣式分開
    在main.js 中根據不同的終端引入樣式，如果編譯的哪個端的，就註釋掉另外一個端的樣式即可，然後需要打兩個不同的包，例如pc，mobile 兩個包：
if(_isMobile()){
       console.log('mobile==============');
      //  require( "@/assets/style/scss/mobile/main.scss");
      //  require( "@/assets/style/scss/mobile/popup.scss");
      //  require( "@/assets/style/scss/mobile/prompt_dialog.scss");
 }else{
      console.log('pc================');
        require( "@/assets/style/scss/pc/main.scss");
        require( "@/assets/style/scss/pc/popup.scss");
         require( "@/assets/style/scss/pc/prompt_dialog.scss");
 }
export const _isMobile=()=>{
    let b=navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)

    return b;
}

注意：其中的判斷終端_isMobile()，在開發環境下能起到作用，但如果打包之後，卻沒有效果，依然導致亂碼，所以只能打兩個包分別部署，然後用nginx 做終端判斷。

-然後我們還需要配置一下nginx 適配不同的終端

server {
        listen       8091;
        server_name  localhost;
 
 
	 location / {
		    add_header 'Access-Control-Allow-Origin' '*'; 
		    root /www/app/pc/;
		    if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT-)|(SonyEricsson)|(NEC-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC-)|(SED-)|(EMOL-)|(INNO55)|(ZTE)|(iPhone)|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" ) {
              root /www/app/mobile/;
            }	
		}
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 }

然後通過http://192.168.150.123:8091/ 即可訪問服務，在不同的終端下，系統會自動的跳轉至不同的資源。