Web移動開發基本概念

前端是個很大的概念，個人理解是用戶可以看到，直接接觸到的層面都算是前端，好比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的基本概念

移動設備上的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標籤將在後面進行介紹。

dpi

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

移動頁面適配

充分了解了上面幾個重要的概念以後，咱們就能夠考慮如何進行移動頁面的適配了。頁面適配想要達到什麼效果呢：在不一樣尺寸的手機設備上，頁面「相對性的達到合理的展現（自適應）」或者「保持統一效果的等比縮放（看起來差很少）」。

適配應關注哪些要素？

通常來講，咱們須要關注的是：字體、高寬間距、圖像（圖標、圖片）,下面介紹幾個基礎的適配方法。

• viewport設置

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

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

該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煩惱，但好像也並無變得多麼簡單，由於僅僅對於這麼多類型的設備，以及現存的測試方法，也足矣讓人煩惱了。