H5移动端开发学习总结
對于移動端開發而言，為了做到頁面高清的效果，視覺稿的規范往往會遵循以下兩點： 1.首先，選取一款手機的屏幕寬高作為基準(現在一般選取iphone6的375×667)。之前項目中也用到過iphone5的320×568。 2.對于retina屏幕(如: dpr=2)，為了達到高清效果，視覺稿的畫布大小會是基準的2倍，也就是說像素點個數是原來的4倍（對iphone6而言：原先的375×667，就會變成750×1334）。
viewport（視口） 3個視口 layout viewport（布局視口）:CSS初始包含塊的尺寸。CSS中所有以百分比為單位的長度都是根據它推算出來的。如果把移動設備上瀏覽器的可視區域設為viewport的話，某些網站就會因為viewport太窄而顯示錯亂，所以這些瀏覽器就決定默認情況下把viewport設為一個較寬的值，比如980px，這樣的話即使是那些為桌面設計的網站也能在移動瀏覽器上正常顯示了。ppk把這個瀏覽器默認的viewport叫做 layout viewport。 可以通過document.documentElement.clientWidth來獲取。 visual viewport（視覺視口,即用戶實際看見的部分）：屏幕上顯示的網頁區域的尺寸，會被縮放影響，可以通過window.innerWidth來獲取。 ideal viewport（完美視口）:完美適配移動設備的viewport，它的寬度等于移動設備的屏幕寬度。有了完美視口，用戶不用縮放和拖動網頁就能夠很好的進行網頁瀏覽。而完美視口需要通過viewport meta標簽來進行相應的設置。 像素 一個像素就是計算機屏幕能顯示一種特定顏色的最小區域。屏幕上的像素越多，同一時間你可以看到的就越多。 設備物理像素 設備屏幕的物理像素，任何設備的物理像素的數量都是固定的。他是顯示設備中一個最微小的物理部件。每個像素可以根據操作系統設置自己的顏色和亮度。 CSS像素:px(設備獨立像素) 邏輯像素，瀏覽器使用的抽象單位(之所以叫抽象單位，是因為其可以根據不同的設備和不同的關系來變大變小，所以稱為抽象單位)為Web開發者創造的，在CSS和JavaScript中使用的一個抽象的層。px是相對長度單位，相對的是設備物理像素(device pixel) 注意：在舊的屏幕上，當縮放程度為100%時，一個CSS像素等于一個設備像素。但當在高密度屏幕上，例如蘋果的視網膜屏幕，一個CSS像素跨越了多個設備像素。如果用戶縮小到足夠的程度，一個CSS像素會變得明顯比一個設備像素小。 舉個例子： 當給一個元素設置width:200px時，到底會發生什么事情？ 這個width為200px的元素跨越了200個CSS像素。而200個CSS像素相當于多少個設備物理像素取決于屏幕的特性(是否是高密度)和用戶進行的縮放。 用戶放大得越大，一個CSS像素覆蓋的設備物理像素就越多。因此，這個元素不一定會跨越200個設備物理像素。例如：在蘋果的視網膜屏幕上，視網膜屏幕的像素密度是普通屏幕的兩倍，那么這個元素就跨越了400個設備物理像素。如果用戶放大，它將跨越更多的設備物理像素。 再比如以iphone6為例： 設備寬高為375×667，可以理解為設備獨立像素(或CSS像素)。 其dpr為2，根據上面的計算公式，其設備物理像素就應該×2，為750×1334。
位圖像素 一個位圖像素是柵格圖像(如：png, jpg, gif等)最小的數據單元。每一個位圖像素都包含著一些自身的顯示信息(如：顯示位置，顏色值，透明度等)。 理論上：1個位圖像素對應于1個物理像素，圖片才能得到完美清晰的展示。 在普通屏幕下是沒有問題的，但是在retina屏幕下就會出現位圖像素點不夠，從而導致圖片模糊的情況。對于dpr=2的retina屏幕而言，1個位圖像素對應于4個物理像素，由于單個位圖像素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊。 所以，對于圖片高清問題，比較好的方案就是兩倍圖片(@2x)。 如：200×300(css pixel)img標簽，就需要提供400×600的圖片。 如此一來，位圖像素點個數就是原來的4倍，在retina屏幕下，位圖像素點個數就可以跟物理像素點個數形成 1 : 1的比例，圖片自然就清晰了(這也解釋了之前留下的一個問題，為啥視覺稿的畫布大小要×2？)。
屏幕尺寸 屏幕尺寸：指屏幕的對角線的長度，單位是英寸。
設備像素比(device pixel ratio) 設備像素比簡稱為dpr，其定義了物理像素和設備獨立像素的對應關系。它的值可以按下面的公式計算得到： 設備像素比 ＝ 設備物理像素 / 設備獨立像素 計算公式： 1px = (dpr)^2dp; 獲得設備像素比后，便可得知設備像素與CSS像素之間的比例。當這個比率為1:1時，使用1個設備像素顯示1個CSS像素。當這個比率為2:1時，使用4個設備像素顯示1個CSS像素，當這個比率為3:1時，使用9（33）個設備像素顯示1個CSS像素。 在JavaScript中，可以通過window.devicePixelRatio獲取到當前設備的dpr。而在CSS中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不同dpr的設備，做一些樣式適配 為什么iPhone5是320px586px？ 就是因為其dpr = 2 dpr = 2表示一個CSS像素等于4個物理像素 所以：640dp1136dp = 320px*568px
iphone5對外宣稱的640*1136是物理像素，而我們實際開發中用的px是邏輯像素。
DPI:打印機每英寸可以噴的墨汁點 PPI(pixel per inch)：屏幕每英寸的像素數量，即單位英寸內的像素密度 PPI越高，像素數越高，圖像越清晰。 ppi和dpi是同一個概念，Android比較喜歡使用dpi，IOS比較喜歡使用ppi。 但是可視度越低(小),系統默認設置縮放比越大 Retina屏(高清屏)：dpr都是大于等于2
meta標簽
標簽有很多種，而這里要著重說的是viewport的meta標簽，其主要用來告訴瀏覽器如何規范的渲染Web頁面，而你則需要告訴它視窗有多大。 手機瀏覽器是把頁面放在一個虛擬的”視口”（viewport）中，視口可大于或小于手機屏幕的可視區域，一般手機默認viewport大于可視區域。這樣不會破壞沒有針對手機瀏覽器優化的網頁的布局，用戶可以通過平移和縮放來看網頁的其他部分。 設置頁面窗口自動調整到設備寬度，并禁止用戶及縮放頁面 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1, user-scalable=no" /> 復制代碼上述屬性基本含義：
width=device-width 用來指定 layout viewport(布局視口) 的大小,device-width 為設備的寬度。如果不指定該屬性（或者移除viewport meta標簽），則layout viewport寬度為瀏覽器默認值。如：iPhone為980px。
<meta name="viewport" content="width=device-width" /> 復制代碼這樣一來layout viewport將成為ideal viewport(完美視口)，因為layout viewport寬度與設備視覺視口寬度一致了。 除此之外，我們還可以通過設置initial-scale=1來實現ideal viewport。
<meta name="viewport" content="initial-scale=1" /> 復制代碼initial-scale – 初始的縮放比例 minimum-scale – 允許用戶縮放到的最小比例 maximum-scale – 允許用戶縮放到的最大比例。1.0表示不縮放 user-scalable – 用戶是否可以手動縮放,no表示不可以手動縮放
忽略將頁面中的數字識別為電話號碼：
<meta name="format-detection" content="telephone=no" /> 復制代碼忽略Android平臺中對郵箱地址的識別:
<meta name="format-detection" content="email=no" /> 復制代碼給頁面設置最大寬度和最小寬度 如果在頁面中我們使用rem結合js動態計算font-size值來實現多屏幕適配，這種方式可以無限適配最大和最小的終端屏幕。但是當屏幕超過一定的尺寸以后還繼續顯示h5頁面的話會給用戶帶來不好的體驗。因此，我們需要給頁面設置最大的寬度和最小寬度。 比如：
{max-width:640px;min-width:320px; } 復制代碼line-height屬性的問題 line-height 的一個主要作用是：使得文本在父級元素中垂直居中。 屬性值：
normal 默認。設置合理的行間距。 number 設置數字，此數字會與當前的字體尺寸相乘來設置行間距。 length 設置固定的行間距。% 基于當前字體尺寸的百分比行間距。 inherit 規定應該從父元素繼承 line-height 屬性的值。 lineheight屬性很有用，但是也存在一些問題：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>lineheight</title><style type="text/css">.box{font-size: 100px;border: 1px solid red;/*line-height: 100%;*/}</style> </head> <body> <div class="box">我是超大字體</div> </body> </html> 復制代碼從上圖，我們發現字體和父元素上下之間有點小間距。這里我們可以通過給父元素設置line-height:100%來解決這個問題。 上下的小間距是由于line-height 與 font-size 的計算值之差造成的。當設置為line-height 的值為100%的時候，line-height的值就等于 font-size的尺寸，此時的空白間距為0。
小知識點 撥打電話代碼：
<a href="tel:1234567890">打電話給:1234567890</a> 復制代碼發短信代碼：
<a href="sms:1234567890">發短信給:1234567890</a> 復制代碼調用手機系統自帶的郵件功能代碼：
<p><a href="mailto:dlut123@126.com">發電子郵件</a></p> 復制代碼rem自適應原理 rem是根據html的font-size大小來變化，正是基于這個出發，我們可以在每一個設備下根據設備的寬度設置對應的html字號，從而實現了自適應布局
調整html元素大小的值 有css與js兩種方式 css方式：
html { font-size: calc(100vw / 3.75); } 復制代碼除以3.75這里是以iphone6為設計稿為標準的，100vw表示設備寬度。為了使得html的字體大小為100px，這樣我們在換算的時候，1px 就是0.01rem，就很方便我們計算。 js方式： 我們只需要監聽resize事件即可
document.documentElement.style.fontSize = document.documentElement.clientWidth/3.75 + 'px'; $(window).on('resize', function() {document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px'; }) 復制代碼為了避免在一些手機瀏覽器上不支持calc，vm這些CSS3新屬性，在實際應用中最好還是使用js方式。
相關參考博文：
移動端高清、多屏適配方案
移動前端第一彈：viewport詳解
兩個viewport的故事（第一部分）
移動前端開發之viewport的深入理解
深入了解viewport和px
走向視網膜（Retina）的Web時代
viewports剖析
利用視口單位實現適配布局
總結
以上是生活随笔為你收集整理的H5移动端开发学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C/S框架网介绍|.NET快速开发平台|
- 下一篇： UIProgressView的使用