wap端頁面兼容基礎

1、像素

　　設備物理像素：計算機屏幕能顯示一種特定顏色的最小區域。任何設備的物理像素的數量都是固定的。

　　CSS單位像素：爲web開發者創造的，在CSS和JS中使用的一個抽象的層。

 

　　css中的1px所表明的設備物理像素是不一樣的，例如:

　　一、不一樣的設備或不一樣的環境中，css中的1px所表明的設備物理像素是不一樣的。從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提升了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着一樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。

　　二、用戶縮放。當用戶把頁面放大一倍，那麼css中1px所表明的物理像素也會增長一倍；反之把頁面縮小一倍，css中1px所表明的物理像素也會減小一倍。

2、分辨率

　　一、物理分辨率（DPI，dots per inch）

　　　　每英寸的顯像點數。

　　　　dot 能夠指半調印刷的墨點，能夠指噴墨打印的墨點，能夠指掃描儀的採樣點，能夠指數字圖像的最小單位（即 pixel），能夠指屏幕的物理像素，能夠指操做系統的抽象像素……在不一樣的語境下能夠指不一樣的概念。

　　　　pixel 也能夠指數字圖像的數據 pixel，能夠指屏幕物理像素，也能夠指代操做系統的抽象像素。

　　二、設備像素比（DPR，device pixel ratio）

　　　　設備像素個數 與 理想視口像素單位 的比。

　　　　例如

　　　　早期iphone的設備像素是320物理像素，它們的理想視口也是320 CSS像素，此時DRP設備像素比爲1；後來，屏幕寬度變成了640物理像素，理想視口的寬度仍爲320 CSS 像素，設備像素比變成了2。

3、視口view-port

　　一、包含塊（Containing Block）模型

　　當webkit計算元素的盒子的位置和大小時，它須要計算該元素和另外一個矩形區域的相對位置，這個矩形區域被稱爲元素的包含塊。相似塊級格式化上下文

　　　　-- 根元素的包含塊稱爲初始包含塊，大小就是可視區域（viewport）

　　　　--position屬性爲static或者relative的元素，它們的包含塊就是最近祖先的盒模型的內容區域。

　　　　--position屬性爲fixed，那麼該元素的包含塊脫離HTML文檔，固定在可視區域的特定位置。

　　　　--position 屬性爲absolute，由最近的含有屬性爲absolute、relative、或者fiexd的祖先決定。

　　二、寬度的基準

　　每一個塊級元素的默認寬度都爲100%，是以其包含塊的寬度爲基準的。如：

　　Div的父元素爲body，body的父元素爲html，他們都沒有聲明具體的寬度時，就要看html的包含塊，便是viewport可視區域（初始包含塊）。

　　能夠經過給元素聲明很是大的寬度來突破這個限制。

　　三、佈局視口（layout viewport）

　　對應於初始包含塊視口。以CSS px 爲單位

　　默認狀況下，一個手機或者平板的佈局寬度是768-1024像素。

　　在PC端，初始包含塊與瀏覽器可視區域寬度一致。到wap移動端上，瀏覽器寬度過小，沒法和PC一樣的方式來佈局網頁。因而，將佈局視口與可視視口分離。

　　四、視覺視口（visual viewport）

　　瀏覽器的寬度，用戶正在看到的網站的區域。能夠經過縮放來操做視覺視口，對開發過程並非很重要。

　　五、理想視口（ideal viewport）

　　 對具體設備來講最理想的佈局視口尺寸。CSS 單位.

　　好比，早期iphone的理想視口爲320*480px，iphone5升級爲320*568px。

 

4、Meta標籤　

　　Viewport meta是由蘋果發明的，主要目的是讓佈局視口的尺寸和理想視口的尺寸匹配。

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

　　在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱爲一個個屬性和值)，以下：

　　

width	設置layout viewport  的寬度，爲一個正整數，或字符串"width-device"
initial-scale	設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale	容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale	容許用戶的最大縮放值，爲一個數字，能夠帶小數
height	設置layout viewport  的高度，這個屬性對咱們並不重要，不多使用
user-scalable	是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許

　　將width設爲device-width，理想的值與設備寬度相等CSS單位

　　能夠看到經過width=device-width，全部瀏覽器都能把當前的viewport寬度變成ideal viewport的寬度，但要注意的是，在iphone和ipad上，不管是豎屏仍是橫屏，寬度都是豎屏時ideal viewport的寬度。

　　<meta name="viewport" content="initial-scale=1">

　　這句代碼也能達到和前一句代碼同樣的效果，也能夠把當前的的viewport變爲 ideal viewport。