PC端、移動端的頁面適配及兼容處理

1、關於移動端兼容性

     目前針對跨終端的方案，主要分爲兩大陣營：一套資源Vs兩套資源。

　　第一種是經過響應式或頁面終端判斷去實現一套資源適配全部終端；

　　第二種是經過終端判斷分別調取兩套資源以適配全部終端。

　　這兩種思路咱們並不能斬釘截鐵的說哪個更優選，正所謂」合適的纔是最好的」。

　　思路一:經過響應式或頁面終端判斷去實現一套資源適配全部終端

　　優點：只需維護一套資源，維護成本較低。

　　劣勢：需加載適配各個終端的各個資源，在不一樣終端經過響應式佈局實現不一樣展示，部分交互效果須要在頁面中作終端判斷，代價較大，若圖片資源爲一套，部分圖片在超高分辨率設備（例如iphone系列）下會失真，且在非wifi狀況下即便加了延時加載也易出現加載慢的狀況。

　　技術選型：jquery（或原生js等）+ 響應式 + 前端模塊加載器（seajs或RequireJS等）+ css預處理器（sass 或less等）。jquery較好的兼容性配合響應式可相對代價較小地實現跨終端。前端模塊加載器主要負責按需加載，以提升頁面加載速度，css預處理器 的變量、運算、嵌套等特性可大大提升手動計算響應式的效率，媽媽不再用擔憂我把比例算錯了。固然後二者可參考需求及成本決定是否採用。

　　思路二:經過終端判斷分別調取兩套資源以適配全部終端

　　優點：可根據不一樣端作個性設計及個性化信息推送且可按需加載，如移動端可配合重力感應、不一樣手勢作各類炫酷拽效果，pc頁面可不受流量限制作適合pc端的效果。

　　劣勢：需維護兩套資源，維護成本增長。

　　技術選型：zepto（或xui等移動端輕量級框架）+ 響應式 + 前端模塊加載器 + css預處理器 + 終端適配。zepto做爲jquery的移動端版本，依然延續其自身優點，大幅優化了移動端API且摒棄了兼容」非現代瀏覽器」的冗餘代碼，成爲移動端輕 即可用的js框架表明，對於習慣了jquery的同窗來講簡直是不二之選！

　　終端適配目前通常經過ua判斷來實現。ua判斷可放在服務端也可放在頁面中，在代理服務器中作跳轉更快、更準確且不走應用程序層，即便瀏覽器禁用了js依然能夠跳轉到相應的地址，同時秉承着公共服務放在服務端這樣的雲端服務理念，咱們選擇了經過代理服務器作終端適配。

User-Agent嗅探，即Web瀏覽器發送一個Web頁面或資源請求時，會發送一個User-Agent首部做爲HTTP請求的一部分，那麼咱們就能夠在服務器端獲取想要的信息，進而判斷並引導用戶到達相應的頁面地址。

 

2、pc上的網站在移動端上怎麼辦？

  若是把移動端的可視區域(320-768)的話，大部分網站都會由於太窄而顯示錯亂；因此瀏覽器默認把viewport設置爲一個較寬的值 980px或1024px，至少保證PC網站在移動端上能夠顯示，只不過出現了橫向滾動條而已。

（一）幾個概念

  1.css像素

• html中度量的單位 用px來計算，在pc中每每 1 css px ＝ 1 物理像素
• css像素時抽象和相對的了，在不一樣設備中1px對應不一樣的設備像素；iphone3分辨率是320*480 即 css 1px ＝ 1個物理像素；iphone4 分辨率640x960但屏幕尺寸沒有改變，意味着同一塊區域像素多了1倍 即 css 1px ＝2個物理像素；

  2.物理像素

• 表示每英寸所擁有的像素數目，數值越高，表明屏幕可以以更高的密度來顯示圖像

  3.分辨率

• 顯示器所能顯示的像素多少，顯示器能夠顯示的像素越多，畫面就越精細，一樣的屏幕區域能顯示的信息就越多

   4.devicePixelRatio

• window.devicePixelRadio = 物理像素/css像素 在iphone4中devicePixelRatio＝2 也就是1css像素＝2個物理像素
• devicePixelRatio在不一樣瀏覽器中存在一些兼容性問題，並非徹底可靠的

    5.layout viewport

• 移動設備的默認viewport,css佈局是以layout viewport 來作爲參考系計算的
• document.documenElement.clientWidth 獲取
• 該尺寸時動態設置

    6.visual viewport

• 表明瀏覽器窗口的尺寸，當用戶放大瀏覽器時這個尺寸就會變小
• window.innerWidth 獲取

    7.ideal viewport

• 屏幕尺寸 設備屏幕的尺寸 單位是物理像素
• screen.width 獲取 屏幕尺寸是不變的
• 在該viewport中用戶不須要縮放和橫向滾動就能夠正常查看網站的全部內容
• 設置移動端網站通常以這個viewport爲準,ideal viewport 的寬度等於設備屏幕寬度，使得不管在什麼分辨率下，那些針對ideal viewport設計的網站均可以完美的呈現給用戶。

（二）如何實現屏幕適配

　　須要用到

1 　<meta name="viewport" content="width=device-width">

　　meta viewport 中有6個通用屬性：

• width 設置layout viewport的寬度 正整數或字符串 'width-device'
• initial-scale 設置頁面的初始縮放值，數字或小數
• minimum-scale 容許用戶的最小縮放值 數字或小數
• maximum-scale 容許用戶的最大縮放值 數字或小數
• height 設置layout viewport 的高度，這個屬性不多用到
• user-scaleabel 是否容許用戶進行縮放 'no'或‘yes’ 還有2個須要特別注意的兩個屬性

• target-densitydpi 在andriod 4.0一下的設備中，不支持設置viewport的width，android 自帶瀏覽器支持設置 target-densitydpi來達到目的；

  target-densitydpi = UI-width/device-width*window.devicePixelRation*160
  //UI-width: 佈局寬度
  //device-width:屏幕分辨率寬度 iphone4爲640
  //target-densitydpi=device-dpi 標示使用設備自己物理屏幕的像素,不會發生默認縮放

• miniual-ui ios的safari爲meta表天新增的屬性，在網頁加載是隱藏頂部的地址欄和底部的導航欄

  （三）相關代碼講解

//移動頁面設計 480*854的比例 
//dpi = 480/screen.width*window.devicePixelRatio*160;
//scalevalue = screen.width/480;
//控制適配 分爲5種組合

/* width ＋ target-densitydpi(計算出來的) */
<meta name="viewport" content="width=480,target-densitydpi=dpi,minimal-ui">

/* width */
<meta name="viewport" content="width=480,minimal-ui">

/* width+target-densitydpi=device-dpi */
<meta name="viewport" content="width=480,targrt-densitydip=device-dip,minimal-ui">

/* width+initial-scale */
<meta name="viewport" content="width=480,initial-scale=scalevalue,maximum-scale=scalevalue,minimum-scale=scalevalue,minimal-ui">

/* targrt-densitydpi */
<meta name="viewport" content="targrt-densitydpi=dpi,minimal-ui">

//經過順序設置5次來實現適配 直到
Math.abs(window.innerWidth-480)<=10 表示viewport設置正確了。

（四）橫豎屏

js代碼控制

window.addEventListener("orientationchange",function () {
        This.isOrietation = true;
        This.changeOriention();
    });
//建議執行橫豎屏的事件都經過一個偵聽完成，作一個統一的管理；在屏幕橫豎屏切換完成以後再執行相應的事件

css控制

//定義橫屏顯示的樣式
@media screen and(orientation:landspace){...}
//定義豎屏顯示的樣式
@media screen and(orientation:portrait){...}
//某個尺寸的特殊樣式 豎屏時寬度爲768px 符合通常ipad的條件
@media only screen and(orientation:portrait) and(device-width:768px){...}

 

 

參考：http://www.uisdc.com/mobile-compatibility-analysis

        http://www.ituring.com.cn/article/130015