Web前端如何快速的兼容手机
如何快速的做到手機端的頁面兼容
? ?為什么要寫這篇文章
? ?學習重點
? ? ?lib-flexible插件
?正文
? 前端兼容的痛點
? ? ? 在實際項目開發過程中，作為前段經驗并不豐富的后端開發人員，總是會在UI上栽跟頭。手機中實際展示效果總是跟模擬器中的展示效果差之千里。
?
舉個例子，左邊，為我在chrome瀏覽器中調試的頁面，右側為IPhone5s打開之后的頁面效果。
這樣的頁面，別說客戶無法忍受，如果這個頁面不是我寫的，我必然會找到那個始作俑者，把這個頁面的截圖狠狠的甩到她臉上，問她，你是怎么做的？這樣的頁面讓客戶怎么看，這樣的按鈕，讓用戶怎么點，難道想點個累計掃碼，一不小心手指稍稍偏了一點兒，頁面就關閉了？
作為一個還算合格的后端開發人員。
我保證，我確信，我真的已經努力做了兼容，所有高度都是動態分配，包括頁面高度，都由Js根據屏幕可見高度努力算出來，可為什么呈現給用戶的效果還會是這樣？這樣的慘不忍睹。
代碼可以分享給大家：
//獲取屏幕的高度var screenHeight = window.screen.availHeight;//獎項Div距離頂部的高度，為頁面總高度的4.5分之一$(self._contentPrize).css("margin-top", screenHeight / 4.5);//初始化紅包彈出框//紅包Div距離頂部的高度為自己高度的20%$("#redPackageContent").css("padding-top", $("#redPackageContent").height() * 0.20);//紅包金額的Div顯示距離頂部為紅包頁面高度的15%$("#redPackageInfo").css("padding-top", $("#redPackageContent").height() * 0.15);//紅包頁面底部的按鈕Padding紅包頁面的高度為紅包頁面高度的20%$("#redPackagebutton").css("padding-top", $("#redPackageContent").height() * 0.20);這段代碼是試出來的最佳高度，可能沒有任何邏輯可言。在一塌糊涂的UI面前，程序員的邏輯已被擊潰。
剛開始我以為是微信瀏覽器自帶底部導航欄的問題，但，將導航欄的底部高度減去之后，依然無法做到兼容。就算做到兼容主流手機，依然無法保證做到全兼容。
?主流手機的分辨率
? ? ? ?蘋果手機：
| iPhone 4S | 3.5寸 | 960 × 640 |
| iPhone 5（5S/5C） | 4.0寸 | 1136 x 640 |
| iPhone 6 | 4.7寸 | 1334 x 750 |
| iPhone 6 Plus | 5.5寸 | 2208 x 1242 (1920x1080) |
| iPhone 6S | 4.7寸 | 1334 x 750 |
| iPhone 6S Plus | 5.5寸 | 2208 x 1242 (1920x1080) |
| iPhone SE | 4寸 | 1136 x 640 |
| iPhone 7 | 4.7寸 | 1334 x 750 |
| iPhone 7 Plus | 5.5寸 | 2208 x 1242 (1920x1080) |
| iPhone 8 | 4.7寸 | 1334 x 750 |
| iPhone 8 Plus | 5.5寸 | 2208 x 1242 (1920x1080) |
| iPhone X | 5.8寸 | 2436 × 1125 |
? ? ? ?華為手機：
| 華為P30Pro | 6.47寸 | 2340×1080 |
| 華為 Mate 20 | 6.53寸 | 2244×1080 |
| 華為暢享9 PLUS | 6.5寸 | 2340×1080 |
| 華為 Mate 20 Pro | 6.39寸 | 3120x1440 |
| 華為P30 | 6.1寸 | 2340×1080 |
| 華為Nova 4 | 6.4寸 | 2310 x 1080? |
| 華為Nova 4e | 6.15寸 | 2312×1080 |
| 華為Nova 5 | 6.39寸 | 2340x1080 |
| 華為 Mate 20 X | 7.2寸 | 2244x1080 |
| 華為麥芒 8 | 6.21寸 | 2340x1080 |
| 華為 Mate 20 RS? | 6.39寸 | 3120x1440 |
| 華為暢享9S | 6.21寸 | 2340x1080 |
| 華為暢享9 | 6.26寸 | 1520x720 |
| 華為 P20 Pro | 6.1寸 | 2240x1080 |
| 華為 nova 5i | 6.4寸 | 2310×1080 |
| 華為暢享 9e | 6.09寸 | 1560x720 |
| 華為 P20 | 5.8寸 | 2244×1080 |
| 華為 暢享 MAX | 7.12寸 | 2244×1080 |
| 華為 nova 3i | 6.3寸 | 2340×1080 |
| 華為?nova 3 | 6.3寸 | 2340 x 1080 |
| 華為 mate 10 pro | 6.0寸 | 2160x 1080 |
| 華為 nova 2s | 6.0寸 | 2160x1080 |
| 華為 暢享8e | 5.7寸 | 1440*720 |
| 華為 麥芒7 | 6.3寸 | 2340 x 1080 |
| 華為 nova 2 Plus | 5.5寸 | 1920x 1080 |
| 華為 暢享8 Plus | 5.93寸 | 2160x 1080 |
| 華為 nova 青春版 | 5.2寸 | 1920x 1080 |
| 華為 nova 3e | 5.84寸 | 2280x1080 |
| 華為 Mate 9 | 5.9寸 | 1920x1080 |
| 華為 暢享7 Plus | 5.5寸 | 1280x720 |
| 華為 P10 | 5.1寸 | 1920x1080 |
| 華為 麥芒6 | 5.9寸 | 2160x1080 |
| 華為 P10 Plus | 5.5寸 | 2560 x 1440 |
| 華為 暢享 8e 青春 | 5.45寸 | 1440x72 |
?lib-flexible插件
? ?為徹底解決兼容的問題，在眾多兼容插件中找到了最適合自己的lib-flexible插件，該插件主要使用rem進行布局。
? ?前期準備工作
? ?在使用該插件前，我們只需要做兩件事情，
? ?第一，下載?lib-flexible.js文件并引用至我們的項目當中。
? ?第二，設置viewport，設置代碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">? ? ? ? 這樣設置的目的在于網頁在設備內的頁面寬度就會等于邏輯設備像素大小。
?第三，在body中添加如下設置：
<body ontouchstart></body>插件原理
? ?lib-flexible插件是基于設備的寬度的像素為基礎像素，也就是device-width。在插件中，統一認為設備的寬度為10rem。再根據該設備的寬度像素，計算出1rem所占像素。
?device-width的計算公式為：
設備的物理分辨率/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 設備的物理分辨率/devicePixelRatio?
devicePixelRatio稱為設備像素比，每款設備的devicePixelRatio都是已知，并且不變的，目前高清屏，普遍都是2，不過還有更高的，比如2.5, 3 等，魅族note的手機的devicePixelRatio就是3。淘寶觸屏版布局的前提就是viewport的scale根據devicePixelRatio動態設置。
這么做目的當然是為了保證頁面的大小與設計稿保持一致了，比如設計稿如果是750的橫向分辨率，那么實際頁面的device-width，以iphone6來說，也等于750，這樣的話設計稿上標注的尺寸只要除以某一個值就能夠轉換為rem了。通過js設置viewport的方法如下。
var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');lib-flexible布局的第二個要點，就是html元素的font-size的計算公式，font-size = deviceWidth / 10：
接下來要解決的問題是，元素的尺寸該如何計算，比如說設計稿上某一個元素的寬為150px，換算成rem應該怎么算呢？這個值等于設計稿標注尺寸/該設計稿對應的html的font-size。拿淘寶來說的，他們用的設計稿是750的，所以html的font-size就是75，如果某個元素時150px的寬，換算成rem就是150 / 75 = 2rem。總結下淘寶的這些做法：
?最后。lib-flexible設置了一個臨界點，當設備豎著時橫向物理分辨率大于1080時，html的font-size就不會再變化。
總結
以上是生活随笔為你收集整理的Web前端如何快速的兼容手机的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 宝石熔炼设备可以融化黄金吗？
- 下一篇： HTML知识基础语法篇(8)