NO IMAGE

移動端Web頁面,即常說的H5頁面、手機頁面、webview頁面等。

手機裝置螢幕尺寸不一,做移動端的Web頁面,需要考慮在安卓/IOS的各種尺寸裝置上的相容,這裡總結的是針對移動端裝置的頁面,設計與前端實現怎樣做能更好地適配不同螢幕寬度的移動裝置。

適配的目標

引用一文章的描述:

在不同尺寸的手機裝置上,頁面“相對性的達到合理的展示(自適應)”或者“保持統一效果的等比縮放(看起來差不多)”。

概念理解

在做適配之前,需要先理解一些概念。對於不理解的地方,可以搜尋更多文章看看,本文總結的移動端相容性問題解決方案囊括了4個思考方向, 注意不是唯一的具體的解決方案而是從四個角度來思考問題, 分別是html, css, 指令碼以及http協議(服務端)的視角來考慮相容問題, 僅供參考~

HTTP: 匹配UserAgent欄位

User Agent中文名為使用者代理,簡稱 UA,它是一個特殊字串頭,使得伺服器能夠識別客戶使用的作業系統及版本、CPU 型別、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言、瀏覽器外掛等。

最主流的方法就是在服務端/客戶端查詢這個欄位:

  1. //檢測是否是移動端

  2.        function checkMobile() {

  3.            if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

  4.                alert("請在移動端檢視(或者開發者模式)");

  5.            }

  6.        }

JS: 判斷window和screen

螢幕可用工作區高度/寬:window.screen.availHeight/window.screen.availWidth

螢幕解析度的高/寬: window.screen.height/window.screen.width

網頁可見區域寬/高: document.body.clientWidth/document.body.clientHeight

我喜歡一種暴力的方式:

  1.    ///嘿嘿嘿

  2.    let device = window.innerWidth < window.innerHeight ? "phone" : "laptop";

CSS: @媒體查詢

通過查詢螢幕寬度判斷手機,只侷限於css樣式;
特點是,媒體查詢動態更新,非常方便,而且不僅適應螢幕大小,還動態相容視窗尺寸的改變:

  1. @CHARSET "UTF-8";

  2. @media (max-width: 991px) {

  3.    /*do something*/

  4. }

  5. @media (min-width: 1601px) {

  6.    /*do something*/

  7. }

HTML: 新增縮放標籤

也是非常實用的,通常手機螢幕的ppi/dpi非常高,所以正常的字型會顯得很小,於是最好在html頭中新增以下viewport標籤:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width 設定layout viewport 的寬度,為一個正整數,或字串”width-device”
initial-scale 設定頁面的初始縮放值,為一個數字,可以帶小數
minimum-scale 允許使用者的最小縮放值,為一個數字,可以帶小數
maximum-scale 允許使用者的最大縮放值,為一個數字,可以帶小數
height 設定layout viewport 的高度,這個屬性對我們並不重要,很少使用
user-scalable 是否允許使用者進行縮放,值為”no”或”yes”, no 代表不允許,yes代表允許