推薦：html5 canvas-1.canvas介紹(hello canvas)
大家都知道，目前并不是所有的瀏覽器中支持html5，就算是支持html5的瀏覽器，也不見得支持html5所有的新特性,建議大家使用firefox（開發(fā)者的最愛）或者是chrome瀏覽器，我所有的例子都是基于firefox開發(fā)的

本文分為兩個部分，第一部分討論跨平臺網(wǎng)站的可行性，第二部分討論viewport是如何設(shè)置的

開發(fā)跨平臺網(wǎng)站？

靠標簽的自適應(yīng)寬高實現(xiàn)多尺寸通用��？

標簽寬高可以自適應(yīng)沒錯，我們很早就可以這么做了。但是你會發(fā)現(xiàn)很多pc端的傳統(tǒng)網(wǎng)站還是會把寬度固定。（淘寶采用1000px寬度，搜狐950px...）為什么我們不讓網(wǎng)站自適應(yīng)寬高呢？那是因為，如果我們聽任標簽寬度被瀏覽器任意拉伸，將導(dǎo)致極差的體驗：你不會希望當瀏覽器被縮放到100px時，你的左邊欄變成了面條；也不會希望當瀏覽器被過度拉伸時，你的網(wǎng)站看起來像小學(xué)生的橫格本。所以，靠標簽的自適應(yīng)來實現(xiàn)跨平臺，是不現(xiàn)實的，是以犧牲用戶體驗為代價的。很多時候我們必須固定寬高。

依靠HTML5/">html5設(shè)備檢測構(gòu)建響應(yīng)式網(wǎng)站！

我們依靠html5的設(shè)備檢測查看當前設(shè)備是手機還是平板，并依此去加載相對應(yīng)的css。舉個例子來說：如果檢測到你的設(shè)備是平板，我可以橫著顯示三欄，如果是手機的話，我就只顯示一欄。這個聽起來不難，但實現(xiàn)起來非常復(fù)雜，我們不僅要針對不同設(shè)備開發(fā)多套模版，還要對圖片的尺寸進行處理。對此，我們可以看看波士頓環(huán)球報是如何借助HTML5實現(xiàn)響應(yīng)式設(shè)計的。

總的來說，實現(xiàn)跨平臺網(wǎng)站對大多數(shù)網(wǎng)站來說成本過高，限制太多，是否可行要結(jié)合網(wǎng)站實際情況。

viewport與網(wǎng)站尺寸

手機瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，通常這個虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小 的窗口中（這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。移動瀏覽器引進了 viewport 這個 meta tag，讓網(wǎng)頁開發(fā)者來控制 viewport 的大小和縮放。

基本概念

（1） CSS pixels與device pixels

CSS pixels： 瀏覽器使用的抽象單位， 主要用來在網(wǎng)頁上繪制內(nèi)容。

device pixels： 顯示屏幕的的最小物理單位，每個dp包含自己的顏色、亮度。

等值的 CSS pixels在手機屏幕上占多大的位置，這不是固定的，這取決于很多屬性。經(jīng)過分析和總結(jié)，我們可以得出這么一條公式： 1 CSS pixels = （devicePixelRatio）^2 device pixels （^2是平方的意思，至于 devicePixelRatio是什么東西，后面會講解） 。

（2） PPI/DPI

PPI，有時也叫DPI，所表示的是每英寸所擁有的像素（pixel）數(shù)目，數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。（注：這里的像素， 指的是device pixels。）搞清楚了PPI是什么意思，我們就能很容易理解PPI的計算方式了，我們需要首先算出手機屏幕的對角線等效像素，然后處以對角線（我們平 常所說的手機屏幕尺寸就是說的手機屏幕對角線的長度），就可以得到PPI了。準確的計算公示大家可以參照下圖。比較有意思的是，根據(jù)公式計算出來的 iPhone 4的PPI為330，要比蘋果官方公布的326要高一點點。

同理，以HTC G7為例，480*800的分辨率，3.7英寸，算出來就是252的PPI。

（3） 密度決定比例

我們計算PPI就是為了知道一部手機設(shè)備是屬于哪個密度區(qū)間的，因為不同的密度區(qū)間，對應(yīng)著不同的默認縮放比例，這是一個很重要的概念。

由上圖可知，PPI在120-160之間的手機被歸為低密度手機，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個上流的名字——retina）。

這些密度對應(yīng)著一個特定的縮放比例值，拿我們最熟悉的iphone4或4s來說，它們的PPI是326，屬于超高密度的手機。當我們書寫一個寬度為 320px的頁面放到iphone中顯示，你會發(fā)現(xiàn)，它竟然是滿寬的。這是因為，頁面被默認放大了兩倍，也就是640px，而iphone4或4s的寬， 正是640px。

圖中把高密度的一類圈起來，是因為這是android手機的統(tǒng)計數(shù)據(jù)，在國內(nèi)安卓手機市場中，高密度的設(shè)備占了絕大多數(shù)的市場份額，這是很重要的一點，也是我們做安卓端webapp要注意的關(guān)鍵點。

viewport的使用

viewport總共有5個屬性，分別如下：

解決方案

（1） 簡單粗暴

如果我們按照320px寬的設(shè)計稿去制作頁面，并且不做任何的設(shè)置，頁面會默認自動縮放到跟手機屏幕相等的寬度（這是由于 medium-dpi是target-densitydpi的默認值，和不同密度對應(yīng)不同縮放比例所決定的，這一切都是移動設(shè)備自動完成的 ）。所以這種解決方案，簡單，粗暴，有效。但有一個致命的缺點，對于高密度和超高密度的手機設(shè)備，頁面（特別是圖片）會失真，而且密度越多，失真越厲害。

（2） 極致完美

在這種方案中，我們采用 target-densitydpi=device-dpi，這樣一來，手機設(shè)備就會按照真實的像素數(shù)目來渲染，用專業(yè)的話來說，就是1 CSS pixels = 1 device pixels。比如對于 640*960的 iphone，我們就可以做出 640*960的頁面，在iphone上顯示也不會有滾動條。當然，對于其他設(shè)備，也需制作不同尺寸的頁面，所以這種方案往往是使用媒體查詢來做成響應(yīng)式 的頁面。這種方案可以在特定的分辨率下完美呈現(xiàn)，但是隨著要兼容的不同分辨率越多，成本就越高，因為需要為每一種分辨率書寫單獨的代碼。下面舉個簡單的例 子：

（3） 合理折中

針對安卓設(shè)備絕大多數(shù)是高密度，部分是中密度的特點，我們可以采用一個折中的方案：我們對480px寬的設(shè)計稿進行還原，但是頁面制卻做成 320px寬（使用background-size來對圖片進行縮小），然后，讓頁面自動按照比例縮放。這樣一來，低密度的手機有滾動條（這種手機基本上 已經(jīng)沒有人在用了），中密度的手機會浪費一點點流量，高密度的手機完美呈現(xiàn)，超高密度的手機輕微失真（超高密度的安卓手機很少）。這種方案的優(yōu)點非常明 顯：只需要一套設(shè)計稿，一套代碼（這里只是討論安卓手機的情況）。

分享：html5 Canvas畫圖教程(7)—canvas里畫曲線之quadraticCurveTo方法
今天講quadraticCurveTo方法畫曲線，quadratic的意思是二次，即數(shù)學(xué)中二次元方程那個二次，接下來詳細介紹quadraticCurveTo方法的使用，感興趣的朋友可以了解下哦