移動端基礎

移動端瀏覽器咱們主要針對webkit內核進行兼容

如今移動端碎片化比較嚴重，分辨率和屏幕尺寸大小不一

一、移動端調試方法

• Charome DevTools(谷歌瀏覽器) 的模擬手機調試

• 搭建本地web服務器，手機和服務器一個局域網內，經過手機訪問服務器

• 使用外網服務器，直接IP或域名訪問

二、視口

視口（viewport）就是瀏覽器顯示頁面內容的屏幕區域。視口可分爲佈局視口、視覺視口和理想視口

2.1佈局視口 layout viewport

• 通常移動設備的瀏覽器都默認設置了一個佈局視口，用於解決早期的PC端頁面在手機上顯示的問題

• iOS，Android基本都將這個視口分辨率設置爲980px，因此pc上的網頁大多都能在手機上呈現，只不過元素看上去很小，通常默承認以經過手動縮放網頁。

 

2.2視覺視口visual viewport

• 用戶正在看到的網站區域。

• 能夠經過縮放去操做視覺視口，但不會影響佈局視口，佈局視口仍保持原來的寬度

 

2.3理想視口 ideal viewport

• 爲了使網站在移動端有最理想的瀏覽和閱讀寬度而設定

• 需手動添寫meta視口標籤通知瀏覽器操做

• meta視口標籤的主要目的：佈局視口的寬度應與理想視口寬度一致。就是手機屏有多寬，佈局視口就有多寬

2.4meta視口標籤

標準寫法：

<meta name ="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

 

屬性	解釋說明
width	寬度設置的是viewport寬度，能夠設置device-width（寬度是設備寬度）特殊值
initial-scale	初始縮放比，大於0的數字（倍數，通常爲1.0）
maximum-scale	最大縮放比，大於0的數字（倍數，通常爲1.0）
minimum-scale	最小縮放比，大於0的數字（倍數，通常爲1.0）
user-scalable	用戶是否能夠縮放，yes或no（1或0）（通常設置爲no）

3.二倍圖

3.1 物理像素&物理像素比

• 物理像素點指的是屏幕顯示的最小顆粒，是物理真實存在的。是廠商在出廠時就設置好的

• 開發時用的1px不必定等於1個物理像素

• PC端頁面1px就等於1個物理像素，但移動端不盡相同

• 一個px能顯示的物理像素點的個數，稱爲物理像素比或屏幕像素比

• Retina（視網膜屏幕）是一種顯示技術，能夠將更多的物理像素點壓縮在一塊屏幕內，從而達到更高的分辨率，並提升屏幕顯示的細膩程度

常見移動端屏幕尺寸：

 

3.2多倍圖

• 物理像素比會放大圖片倍數，會形成圖片模糊

• 在標準viewport設置中，使用倍圖來提升圖片質量，解決在高清設備中的模糊問題

• 背景圖片注意縮放問題

 開發中須要用多倍圖，好比須要放一個50*50px的圖片，直接放到iphone8裏，會放大二倍，不清晰，這時採起用一張100*100px的圖片，手動縮小爲50*50px

準備的圖片比實際須要的大二倍，就是二倍圖，固然也有3倍4倍圖

 

3.3二倍精靈圖

• 在firework裏面把精靈圖等比例縮放成原來的一半

• 以後根據大小測量座標

• 注意代碼裏面background-size也要設置爲精靈圖原來寬度的一半

4.移動端開發選擇

4.1單獨移動端頁面（主流）

一般狀況下，網址域名前面加m（mobile）能夠打開移動端。經過設備判斷，若是是移動端打開，則自動跳轉到移動端頁面。

• 流式佈局（百分比佈局）

• flex彈性佈局（強烈推薦）

• less+rem+媒體查詢佈局

• 混合佈局

4.2響應式兼容pc移動端

經過判斷屏幕寬度來改變樣式，以適應不一樣終端

缺點：製做麻煩，需花費很大精力去調兼容性問題

• 媒體查詢

• bootstarp

5.移動端技術解決方案

5.1移動端瀏覽器

移動端瀏覽器基本以webkit內核爲主，因此就考慮webkit兼容性問題。

5.2css初始化 normalize.css

移動端CSS初始化推薦使用normalize.css

• 保護了有價值的默認值

• 修復了瀏覽器bug

• 是模塊化的

• 擁有詳細文檔

官網地址:http://necolas.github.io/normalize.css/

5.3特殊樣式

/* *手機端點擊連接會有一個藍色背景，就是點擊高亮，需清除，設置爲transparent* */ div a { -webkit-tap-highlight-color: transparent; } /* *移動端瀏覽器默認的按鈕和輸入框外觀要自定義更改需加上這個屬性* */ div button { -webkit-appearance: none; } /* *禁用長按頁面時彈出菜單* */ img, a { -webkit-touch-callout: none; }