摘要：移動(dòng)客戶端的開發(fā)類型原生，也就是完全使用移動(dòng)設(shè)備系統(tǒng)語(yǔ)言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗(yàn)到的交互都是原生的。

前端是個(gè)很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁(yè)界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說法一般是指Web前端，也就是針對(duì)于網(wǎng)頁(yè)端開發(fā)的工作。

Web App就是以瀏覽器作為客戶端的軟件。比如你要寫文檔，一般會(huì)打開Office 2013之類的本地軟件；但是你也可以選擇在瀏覽器里輸入一個(gè)網(wǎng)址，再比如用桌面客戶端來收發(fā)郵件，但你也可以直接用瀏覽器登陸gmail亦或者QQ郵箱，直接把這個(gè)當(dāng)客戶端用。總之就是使用網(wǎng)頁(yè)版代替本地軟件。

Mobile Web App 當(dāng)然就是指在手機(jī)端打開的Web App。

Native App（原生APP），也就是完全使用移動(dòng)設(shè)備系統(tǒng)語(yǔ)言寫的客戶端，iPhone iPad就是純Object-C，安卓就是純JAVA, 就是用戶看到的界面,體驗(yàn)到的交互都是原生的。這是性能最棒的開發(fā)方式，但靈活性就沒下面的好。

Web App, 這個(gè)就是在移動(dòng)瀏覽器里打開的，純HTML+CSS+JS，說白了就是個(gè)網(wǎng)頁(yè)，只不過非常的富應(yīng)用，就是在瀏覽器里打開的頁(yè)面。。IOS支持可以在桌面創(chuàng)建訪問的快捷方式，但是說到底還是打開Safari跑。。而且對(duì)設(shè)備硬件的接口什么的挺薄弱。

Hybrid App.[HTML5 in mobile devices] 這個(gè)還是第一次看到這個(gè)概念，實(shí)際上是使用原生寫了一個(gè)容器，然后使用HTML+CSS+JS來實(shí)現(xiàn)用戶界面和交互。Web App的短處便可以克服（因?yàn)樽约簩懙娜萜骺梢暂o助暴露偏底層的接口，比如本地存儲(chǔ)或者麥克風(fēng)控制之類），同時(shí)比起純?cè)膉ava或者object-c開發(fā)靈活性要高（更新可以更快更迅速，也不依賴于市場(chǎng)，因?yàn)檎f白了，就是自己下載更新網(wǎng)頁(yè)資源。。）實(shí)際上這種方式已經(jīng)不限于移動(dòng)端。。據(jù)說豌豆莢其實(shí)是個(gè)pc端的hybrid app ，貌似桌面開發(fā)的性能就現(xiàn)在來說要比移動(dòng)好很多。

個(gè)人覺得其實(shí)如果還是html+CSS+js的話核心都是一樣的，只不過移動(dòng)端可能在頁(yè)面建構(gòu)時(shí)有些關(guān)于尺寸方面（物理像素css像素設(shè)備獨(dú)立像素這一堆）的細(xì)節(jié)需要注意下，包括圖片處理之類的。此外js方面可能就是注意性能方面的問題。如下圖所示他們幾個(gè)的關(guān)系。

移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁(yè)的那一塊區(qū)域，具體一點(diǎn)，就是瀏覽器上(也可能是一個(gè)app中的webview)用來顯示網(wǎng)頁(yè)的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。
一個(gè)在電腦瀏覽器打開的頁(yè)面，用手機(jī)瀏覽器打開的話，會(huì)出現(xiàn)什么情況呢，從手機(jī)瀏覽器的角度而言，它希望盡量現(xiàn)實(shí)完全，但是很顯然不可能，所以現(xiàn)在主流的移動(dòng)瀏覽器都會(huì)把默認(rèn)的viewport設(shè)置的很大，980px,1024px等其他可能。導(dǎo)致我們打開之后看到的是帶橫向滾動(dòng)條的。

關(guān)于viewport有一個(gè)這樣的理論，我覺得很有助于我們理解。原文一 原文二 原文三

這個(gè)理論把瀏覽器默認(rèn)的viewport叫做 layout viewport。這個(gè)layout viewport的寬度可以通過 document.documentElement.clientWidth 來獲取。

visual viewport：layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個(gè)viewport來代表 瀏覽器可視區(qū)域的大小，它把這個(gè)viewport叫做 visual viewport。visual viewport的寬度可以通過window.innerWidth 來獲取。

ideal viewport：必須還要有一個(gè)能完美適配移動(dòng)設(shè)備的viewport,所謂的完美適配指的是，首先不需要用戶縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容；第二，顯示的文字的大小是合適，比如一段14px大小的文字，不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無(wú)法看清，理想的情況是這段14px的文字無(wú)論是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差不多的。當(dāng)然，不只是文字，其他元素像圖片什么的也是這個(gè)道理,它把這個(gè)viewport叫做 ideal viewport，也就是第三個(gè)viewport——移動(dòng)設(shè)備的理想viewport。

ideal viewport并沒有一個(gè)固定的尺寸，不同的設(shè)備擁有有不同的ideal viewport。所有的iphone的ideal viewport寬度都是320px，無(wú)論它的屏幕寬度是320還是640，也就是說，在iphone中，css中的320px就代表iphone屏幕的寬度,也即寬度為100%的效果。但是安卓設(shè)備就比較復(fù)雜了，有320px的，有360px的，有384px的等等。

簡(jiǎn)言之，visual viewport就是當(dāng)前顯示給用戶內(nèi)容的窗口，你可以拖動(dòng)或者放大縮小網(wǎng)頁(yè)，來看清楚網(wǎng)頁(yè)的內(nèi)容。layout viewport 有網(wǎng)頁(yè)的所有內(nèi)容，他可以全部或者部分展示給用戶。ideal viewport 的意義在于，無(wú)論在何種分辨率的屏幕下，那些針對(duì)ideal viewport 而設(shè)計(jì)的網(wǎng)站，不需要用戶手動(dòng)縮放，也不需要出現(xiàn)橫向滾動(dòng)條，都可以完美的呈現(xiàn)給用戶。

移動(dòng)設(shè)備默認(rèn)的viewport是layout viewport，也就是那個(gè)比屏幕要寬的viewport，但在進(jìn)行移動(dòng)設(shè)備網(wǎng)站的開發(fā)時(shí)，我們需要的是ideal viewport。那么怎么才能得到ideal viewport呢？那就是meta標(biāo)簽將在后面進(jìn)行介紹。

在桌面瀏覽器中我們寫css的尺寸的時(shí)候好像并沒有過多的關(guān)注1px到底意味著什么，直觀上往往認(rèn)為對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素，并且也沒什么太大的問題。但是放到移動(dòng)端就不行了，因?yàn)橐苿?dòng)設(shè)備的尺寸，分辨率多種多樣，如果css中的1px還認(rèn)為是一個(gè)像素點(diǎn)的話，那么我們同時(shí)設(shè)置2px長(zhǎng)度的Button，在屏幕密度較高的手機(jī)里就會(huì)顯示的比較小。
這里涉及到一個(gè)dpi的概念，就是每英寸的像素?cái)?shù)，也叫做屏幕像素密度。這個(gè)值越大，屏幕就越清晰。
很直觀的例子，在早先的移動(dòng)設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個(gè)css像素確實(shí)是等于一個(gè)屏幕物理像素的。后來隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時(shí)，一個(gè)css像素是等于兩個(gè)物理像素的。andriod還有l(wèi)dpi,mdpi等等的區(qū)別，關(guān)于移動(dòng)頁(yè)面尺寸的更詳細(xì)的概念，可以參考移動(dòng)端設(shè)計(jì)尺寸基礎(chǔ)知識(shí)，我覺得這個(gè)講的簡(jiǎn)潔又明了，這里就不多廢話了。

充分了解了上面幾個(gè)重要的概念之后，我們就可以考慮如何進(jìn)行移動(dòng)頁(yè)面的適配了。頁(yè)面適配想要達(dá)到什么效果呢：在不同尺寸的手機(jī)設(shè)備上，頁(yè)面“相對(duì)性的達(dá)到合理的展示（自適應(yīng)）”或者“保持統(tǒng)一效果的等比縮放（看起來差不多）”。

適配應(yīng)關(guān)注哪些要素？

一般來說，我們需要關(guān)注的是：字體、高寬間距、圖像（圖標(biāo)、圖片）,下面介紹幾個(gè)基礎(chǔ)的適配方法。

viewport設(shè)置

我們?cè)陂_發(fā)移動(dòng)設(shè)備的網(wǎng)站時(shí)，常常看到下面一行代碼：

該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放（也可以根據(jù)需要），但讓viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果。

這個(gè)name為viewport的meta標(biāo)簽到底有哪些東西呢，又都有什么作用呢？

meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動(dòng)設(shè)備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對(duì)meta viewport的支持，事實(shí)也證明這個(gè)東西還是非常有用的。meta viewport 有如下6個(gè)屬性:

width    //設(shè)置layout viewport  的寬度，為一個(gè)正整數(shù)，或字符串"width-device"
initial-scale    //設(shè)置頁(yè)面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
minimum-scale    //允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
maximum-scale    //允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)
height    //設(shè)置layout viewport  的高度，這個(gè)屬性對(duì)我們并不重要，很少使用
user-scalable    //是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes代表允許

不能使用絕對(duì)寬度的布局
類似width:200px的代碼肯定是不可以的，可以使用百分比或者width:auto。

字體也不能使用絕對(duì)大小（px），而只能使用相對(duì)大小（em）

流動(dòng)布局，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的

    .main{
    
    float:right;
    
    width:70%;
    
    }
    
    .leftBar{
    
    float:left;
    
    width:25%;
    
    }

float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。

選擇加載css

“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”的核心，就是CSS3引入的MediaQuery模塊。

它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。

media=”screenand(max-device-width:400px)”

href=”tinyScreen.css”/>

上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width:400px），就加載tinyScreen.css文件。

media=”screenand(min-width:400px)and(max-device-width:600px)”

href=”smallScreen.css”/>

如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

除了用html標(biāo)簽加載CSS文件，還可以在現(xiàn)有CSS文件中加載。

CSS的@media規(guī)則
同一個(gè)CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的CSS規(guī)則。

    @mediascreenand(max-device-width:400px){
    
    .column{
    
    float:none;
    
    width:auto;
    
    }
    
    #sidebar{
    
    display:none;
    
    }
    
    }

上面的代碼意思是，如果屏幕寬度小于400像素，則column塊取消浮動(dòng)（float:none）、寬度自動(dòng)調(diào)節(jié)（width:auto），sidebar塊不顯示（display:none）。

圖片的處理
除了布局和文本，”自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。

這只要一行CSS代碼：

img{max-width:100%;}

這行代碼對(duì)于大多數(shù)嵌入網(wǎng)頁(yè)的視頻也有效，所以可以寫成：

img,object{max-width:100%;}

老版本的IE不支持max-width，所以只好寫成：

img{width:100%;}

此外，windows平臺(tái)縮放圖片時(shí)，可能出現(xiàn)圖像失真現(xiàn)象。這時(shí)，可以嘗試使用IE的專有命令：

img{-ms-interpolation-mode:bicubic;}

或者，EthanMarcotte的imgSizer.js。

addLoadEvent(function(){

varimgs=document.getElementById(“content”).getElementsByTagName(“img”);

imgSizer.collate(imgs);

});

方法應(yīng)該還有很多，并且不同的應(yīng)用場(chǎng)景也有不同的適應(yīng)方法，以后再不斷總結(jié)和完善。另外，關(guān)于移動(dòng)頁(yè)面的開發(fā)，感覺雖然不用為ie煩惱，但好像也并沒有變得多么簡(jiǎn)單，因?yàn)閮H僅對(duì)于這么多類型的設(shè)備，以及現(xiàn)存的測(cè)試方法，也足矣讓人煩惱了。