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是320px*586px？
就是因爲其dpr = 2
dpr = 2表示一個CSS像素等於4個物理像素
所以：640dp1136dp = 320px568px

iphone5對外宣稱的640*1136是物理像素，而我們實際開發中用的px是邏輯像素。

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

meta標籤

<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:[email protected]">發電子郵件</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方式。

H5移動端開發學習總結

viewport（視口）

meta標籤

給頁面設置最大寬度和最小寬度

line-height屬性的問題

PHP之MVC學習

H5移動端開發學習總結

PHP之Yii框架學習總結

RequireJS學習總結

jQuery源碼學習(二)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結