H5移動端開發學習總結

時間 2019-11-29

標籤 h5 移動開發學習總結欄目無線简体版

原文原文鏈接

對於移動端開發而言，爲了作到頁面高清的效果，視覺稿的規範每每會遵循如下兩點： 1.首先，選取一款手機的屏幕寬高做爲基準(如今通常選取iphone6的375×667)。以前項目中也用到過iphone5的320×568。 2.對於retina屏幕(如: dpr=2)，爲了達到高清效果，視覺稿的畫布大小會是基準的2倍，也就是說像素點個數是原來的4倍（對iphone6而言：原先的375×667，就會變成750×1334）。css

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。html

位圖像素一個位圖像素是柵格圖像(如：png, jpg, gif等)最小的數據單元。每個位圖像素都包含着一些自身的顯示信息(如：顯示位置，顏色值，透明度等)。理論上：1個位圖像素對應於1個物理像素，圖片才能獲得完美清晰的展現。在普通屏幕下是沒有問題的，可是在retina屏幕下就會出現位圖像素點不夠，從而致使圖片模糊的狀況。對於dpr=2的retina屏幕而言，1個位圖像素對應於4個物理像素，因爲單個位圖像素不能夠再進一步分割，因此只能就近取色，從而致使圖片模糊。因此，對於圖片高清問題，比較好的方案就是兩倍圖片(@2x)。如：200×300(css pixel)img標籤，就須要提供400×600的圖片。如此一來，位圖像素點個數就是原來的4倍，在retina屏幕下，位圖像素點個數就能夠跟物理像素點個數造成 1 : 1的比例，圖片天然就清晰了(這也解釋了以前留下的一個問題，爲啥視覺稿的畫布大小要×2？)。前端

屏幕尺寸屏幕尺寸：指屏幕的對角線的長度，單位是英寸。web

設備像素比(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是邏輯像素。iphone

DPI:打印機每英寸能夠噴的墨汁點 PPI(pixel per inch)：屏幕每英寸的像素數量，即單位英寸內的像素密度 PPI越高，像素數越高，圖像越清晰。 ppi和dpi是同一個概念，Android比較喜歡使用dpi，IOS比較喜歡使用ppi。可是可視度越低(小),系統默認設置縮放比越大 Retina屏(高清屏)：dpr都是大於等於2ide

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方式。

相關參考博文：