摘要：移動客戶端的開發類型原生，也就是完全使用移動設備系統語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。

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

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

Mobile Web App 當然就是指在手機端打開的Web App。

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

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

Hybrid App.[HTML5 in mobile devices] 這個還是第一次看到這個概念，實際上是使用原生寫了一個容器，然后使用HTML+CSS+JS來實現用戶界面和交互。Web App的短處便可以克服（因為自己寫的容器可以輔助暴露偏底層的接口，比如本地存儲或者麥克風控制之類），同時比起純原生的java或者object-c開發靈活性要高（更新可以更快更迅速，也不依賴于市場，因為說白了，就是自己下載更新網頁資源。。）實際上這種方式已經不限于移動端。。據說豌豆莢其實是個pc端的hybrid app ，貌似桌面開發的性能就現在來說要比移動好很多。

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

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

關于viewport有一個這樣的理論，我覺得很有助于我們理解。原文一 原文二 原文三

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

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

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

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

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

移動設備默認的viewport是layout viewport，也就是那個比屏幕要寬的viewport，但在進行移動設備網站的開發時，我們需要的是ideal viewport。那么怎么才能得到ideal viewport呢？那就是meta標簽將在后面進行介紹。

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

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

適配應關注哪些要素？

一般來說，我們需要關注的是：字體、高寬間距、圖像（圖標、圖片）,下面介紹幾個基礎的適配方法。

viewport設置

我們在開發移動設備的網站時，常常看到下面一行代碼：

該meta標簽的作用是讓當前viewport的寬度等于設備的寬度，同時不允許用戶手動縮放（也可以根據需要），但讓viewport的寬度等于設備的寬度，這個應該是大家都想要的效果。

這個name為viewport的meta標簽到底有哪些東西呢，又都有什么作用呢？

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

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

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

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

流動布局，各個區塊的位置都是浮動的，不是固定不變的

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

float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。

選擇加載css

“自適應網頁設計”的核心，就是CSS3引入的MediaQuery模塊。

它的意思就是，自動探測屏幕寬度，然后加載相應的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標簽加載CSS文件，還可以在現有CSS文件中加載。

CSS的@media規則
同一個CSS文件中，也可以根據不同的屏幕分辨率，選擇應用不同的CSS規則。

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

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

圖片的處理
除了布局和文本，”自適應網頁設計”還必須實現圖片的自動縮放。

這只要一行CSS代碼：

img{max-width:100%;}

這行代碼對于大多數嵌入網頁的視頻也有效，所以可以寫成：

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

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

img{width:100%;}

此外，windows平臺縮放圖片時，可能出現圖像失真現象。這時，可以嘗試使用IE的專有命令：

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

或者，EthanMarcotte的imgSizer.js。

addLoadEvent(function(){

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

imgSizer.collate(imgs);

});

方法應該還有很多，并且不同的應用場景也有不同的適應方法，以后再不斷總結和完善。另外，關于移動頁面的開發，感覺雖然不用為ie煩惱，但好像也并沒有變得多么簡單，因為僅僅對于這么多類型的設備，以及現存的測試方法，也足矣讓人煩惱了。