本文中所指Mobile WebApp是指運行在Mobile WebKit瀏覽器上的WebApp。本篇文章講解如何像傳統(tǒng)PC網(wǎng)頁開發(fā)一樣，使用定寬布局開發(fā)WebApp，并讓WebApp適應多終端設備：
目前主流的WebApp UI開發(fā)框架有jQuery Mobile、Sencha Touch等，這些框架在處理不同設備分辨率的適配時，采用響應式布局和基于百分比的形式顯示UI組件，UI可以根據(jù)設備的不同尺寸進行呈現(xiàn)。
雖然jQuery Mobile等框架很強大，但是在開發(fā)UI復雜的界面時，還是力不從心：百分比設置寬度不能適應復雜的布局要求。這時就需要固定寬度布局的開發(fā)方式了，但是網(wǎng)上的資料都在講述“定寬網(wǎng)頁設計，并不適用于多終端兼容的情況”，jQuery Mobile等框架也沒有提供良好的解決方案，固定寬度布局在移動設備上真的不可行嗎？
如果真的不可行，我也不需要寫這篇文章了，哈哈。。。(不要扔板磚，下面進入正題)。。。
viewport是網(wǎng)頁可繪制的區(qū)域。雖然viewport可視面積和屏幕尺寸相匹配，但viewport有其自己的尺寸，確定網(wǎng)頁的像素數(shù)量。也就是說，網(wǎng)頁的像素數(shù)量超過定義的viewport尺寸，而不是設備屏幕尺寸的屏幕面積。例如，雖然設備屏幕上可能是480像素寬，viewport是800像素寬，這時網(wǎng)頁設計定寬800像素的頁面可以正好完全顯示在屏幕上。
例如下面的代碼片斷，為HTML文檔指定viewport屬性。viewport的寬度為匹配設備屏幕的寬度，且禁用縮放。
<head> <title>WebApp</title> <meta name="viewport" content="width=device-width, user-scalable=no" /></head>
iPhone 和 Android 平臺上，WebKit 內核的瀏覽器使用 980 像素寬的視見區(qū)或邏輯尺寸，相當于viewport的width=980px。當頁面加載后，內容通常被完全縮放以便整個頁面都可見，盡管內容會被縮放得非常小，甚至不可讀。下面使用一個簡單的定寬布局頁面，在部分手機里使用自帶瀏覽器訪問，顯示情況如下：
可以看到，部分手機中頁面會縮得很小，另外的手機中，頁面被放大，出現(xiàn)橫向滾動條。無論哪種形式，都影響用戶的使用體驗。
iPhone3GS及以上設備的Safari支持修改viewport的width來改變頁面的縮放情況，你可以將width指定為頁面設計的寬度，如此一來，你的頁面正好充滿viewport并全屏顯示，而不會縮放。如當頁面設計寬度為480px時，可以設置viewport的width=480px：
<meta name="viewport" content="width=480px, user-scalable=no" />
遺憾的是Android4.0以下的手機系統(tǒng)自帶瀏覽器中，不支持設置viewport的width，沒關系，Android自帶瀏覽器支持設置另一參數(shù)target-densitydpi來達成目的。經過測試，不同分辨率的手機上，如下值可以讓定寬頁面設計的網(wǎng)頁正好填充全屏寬度，而沒有滾動條：
手機 | 分辨率寬度 | 布局寬度480px | 布局寬度640px | devicePixelRatio |
HTC Wildfire(G8) | 240px | 240dpi | 320dpi | 0.75 |
HTC Hero(G3) | 320px | 240dpi | 320dpi | 1 |
GT-I9100G | 480px | 240dpi | 320dpi | 1.5 |
Nexus S | 480px | 240dpi | 320dpi | 1.5 |
MT-870 | 540px | 213dpi | 284dpi | 1.5 |
MX032 | 640px | 240dpi | 320dpi | 1.5 |
note2 | 720px | 213dpi | 284dpi | 2 |
I9308 | 720px | 213dpi | 284dpi | 2 |
GT-N7108 | 720px | 213dpi | 284dpi | 2 |
GT-I9228 | 800px | 192dpi | 256dpi | 2 |
從這一庹數(shù)據(jù)中，會不會有一個放之眾Android機而皆準的公式呢？
各位愿意偷懶的不用自己推了，就死我的腦細胞就可以了，就是下方這一條了：
target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;
//UI-width ：WebApp布局寬度
//device-width ：屏幕分辨率寬度
其實在上面的一庹數(shù)據(jù)中，note2和GT-I9228的target-densitydpi 是在得出公式計算出來，并驗證了的。
將Android的處理方式應用到剛才的頁面，在上圖中的手機中訪問以作測試：
觀察上圖可見，在所測試的手機上，測試頁面均自適配到手機屏幕的分辨率，全屏顯示且無橫向滾動條。
1、iPhone上，指定viewport 的width等于頁面設計寬度：
<meta name="viewport" content="target-densitydpi=device-dpi, width=480px, user-scalable=no" />
2、Android上，根據(jù)公式計算得出target-densitydpi的值，指定到viewport：
get-target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;//UI-width ：WebApp布局寬度//device-width ：屏幕分辨率寬度<meta name="viewport" content="target-densitydpi=get-target-densitydpi, width=device-width, user-scalable=no" />
到了這一步就簡單了，寫一個函數(shù)針對平臺設置不同的viewport屬性，只需接收網(wǎng)頁設計寬度即可完成設置。
不過在部分手機上，screen.width值不不一定等于屏幕分辨率，如三星 I9100G。該如何處理，等總結完成后寫到新一篇里。。。
------------------------------------------------------------------------------------------------------
本篇文章為博主原創(chuàng)，如需轉載本篇文章，請保留原始地址：、
------------------------------------------------------------------------------------------------------
