web移動端適配方案實踐

  • 2019 年 10 月 4 日
  • 筆記

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/CSXIAOYAOJIANXIAN/article/details/100552937

web移動端適配方案實踐

文章目錄

Write By CS逍遙劍仙 我的主頁: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: [email protected] QQ: 1724338257

移動端web頁面的開發適配一直是前端開發津津樂道的話題，在實際開發過程中，移動端和PC端web頁面的差異不僅僅體現在設備寬度的不同。由於項目歷史背景的原因，下文的方案是團隊選擇的能較好滿足當前項目需求的方案，已經經過線上用戶的考驗，但不一定是當下最完美的移動端適配解決方案。下文來詳細介紹該方案選型。

本文不再對常見概念進行說明，如：設備分辨率、DPR、單位、視口、meta:viewport等，如果對這類概念不甚了解，可以先去搜索引擎查詢了解下。

1. Step1: 單位選擇rem

在移動端，由於設備分辨率和DPR(DevicePixelRatio)差異，使用px(像素)作為單位顯然適配起來非常麻煩。常見的單位有：px、em、rem、vw，這四種單位的介紹已經是老生常談，本方案最後選擇的是使用 rem，相比px和em，優勢是毋庸置疑的，開發者不必再考慮設備分辨率改變導致的元素布局問題，只需要改變根元素 <html> 的 font-size 就能改變所有的字體大小，相當省心。並且相對於vw，可以直接將移動端頁面元素在屏幕居中，再加上良好的兼容性：IE8以上版本和其他瀏覽器都已經支持，是做響應式頁面的不二之選。

2. Step2: 消除DPR差異

消除DPR差異只需要將布局視口大小設為設備像素尺寸，可以通過修改viewport參數來實現。

首先需要計算縮放比，例如 iPhone5-DPR=2，則 scale=0.5

var scale = 1 / window.devicePixelRatio;

接着，修改viewport參數initial-scale、maximum-scale、minimum-scale即可

document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

3. Step3: 動態設置 html 標籤根字體大小

如何實現頁面元素跟隨設備尺寸等比縮放？step1中已經選擇了rem作為單位，在此處只需要固定設置設計稿 html 標籤的字體大小，根據計算公式：

html字體大小 = 基準n * (clientWidth / 設計稿寬度)

為了方便計算，基準n使用100，設計稿寬度約定使用750px，假設設備寬度為750px (iPhone6/7/8)，那麼計算可得根字體大小為font-size: 100px;：

html字體大小 = 基準n * (clientWidth / 設計稿寬度) = 100 * （750 / 750) = 100

根據上述推算，在html頁面中引入下面代碼即可自動完成計算：

(function(doc, win) {  	var docEl = doc.documentElement, // 獲取html標籤  		// 頁面大小改變事件  	    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',          recalc = function() {              var clientWidth = docEl.clientWidth;              if (!clientWidth) return;              // 動態設置html標籤字體大小，便於使用rem縮放              docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';          };  	if (!doc.addEventListener) return;  	win.addEventListener(resizeEvt, recalc, false);  	doc.addEventListener('DOMContentLoaded', recalc, false);  })(document, window);

注意：

  1. rem是相對尺寸單位，是相對於html標籤字體大小的單位
  2. 早先給html標籤設置 font-size: 62.5%; 只是為了實現 1rem = 10px 從而使計算方便，不能滿足此處頁面元素跟隨設備尺寸等比縮放的需求
  3. 文字字體大小建議不要用rem換算，否則會使得移動端頁面字體在PC頁面或者大屏手機看起來非常大

4. Step4: 將設計圖中的尺寸換算成 rem

Step3進行了html根節點文字大小設置，然而意義何在？自然是為了開發者計算的方便。

舉例來說，原本按照設計稿750px寬度開發的頁面，.box在設計稿中的寬高為60px，css如下：

.box {      width: 60px;      height: 60px;  }

進行rem轉換後為

.box {      width: 0.6rem;      height: 0.6rem;  }

即按照公式：

元素rem尺寸(本案例0.6rem) = 設計稿像素尺寸(本案例60px) / 動態設置的html標籤的font-size值(本案例100)

如：60px寬的div，不必關心屏幕尺寸縮放，只需要除以100，設置 width: 0.6rem; 即可

5. Step5: 媒體查詢設置body字體大小

其實完成了上述Step1～4，已經基本完成了移動端的適配工作，然而，有些情況下，如資訊類文字較多的頁面，如果在大屏設備上展示，文字會過大，影響閱讀體驗，此時需要調整文字大小，使得大屏展示更多的文字內容。

本方案採用媒體查詢來控制文字大小，將屏幕分為三等：321px以下 / 321px-400px之間 / 400px以上，並針對不同尺寸設置文字大小(px)即可。

@media screen and (max-width: 321px) {      body { font-size:16px; }      header,footer { font-size:16px; }  }  @media screen and (min-width: 321px) and (max-width:400px) {      body { font-size:17px; }      header,footer { font-size:17px; }  }  @media screen and (min-width: 400px) {      body { font-size:19px; }      header,footer { font-size:19px; }  }

6. 其他

6.1 特殊css處理

移動端相對於pc端，需要特殊處理一些樣式

1. 點擊高亮效果

在移動端瀏覽器會存在點擊出現高亮的效果，在項目中一般不需要這個默認的效果，需要把點擊顏色設置成透明

-webkit-tap-highlight-color:transparent;

2. input默認樣式清除

在移動設備的瀏覽器中input標籤一般會有默認的樣式，通過border=none,outline=none無法去除如立體效果、3d效果等，需要添加下列樣式

-webkit-appearance: none;

3.最小寬度和最大的寬度

在移動端開發的時候，如果想限制某個元素的大小，選用 max-width 限制最大值，為了不讓用戶無止境的縮放，使用min-width 防止在超小屏幕上顯示錯亂(不考慮小屏幕手機用戶)，移動端為了在寬度方向上進行適配會使用百分比寬度，高度方向上由於頁面的高度由內容撐開的，所以高度還是使用具體的值。

6.2 IE默認使用最高版本

ie瀏覽器是web前端一大毒瘤，在開發過程中發現，如果不設置指定meta標籤，ie會直接使用ie7內核渲染，這顯然不是開發者所希望的，添加下面的meta標籤即可：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

7. 總結

本文講述了開發項目中的移動端的適配方案，採用的是 rem + html根字體大小設置的方案。目前市面上還有很多其他的適配方案，此處不再一一列舉，不足之處還請指正。

VirMach 便宜 VPS

QNews

QNews