移動webapp頁面適配方案

標籤：android   style   blog   http   使用   strong   io   2014   

Viewport(視口)概念

In web browsers, the viewport is the visible portion of the entire document.

移動端瀏覽器在一個通常比螢幕更寬的虛擬”視窗“（視口）中渲染頁面，從而無需將所有頁面都壓縮排小螢幕裡（那樣會把很多沒有針對移動端進行最佳化的網站打亂）。使用者可以通過平移和縮放來瀏覽頁面的不同地區。
大部分的移動端瀏覽器使用一個預設的視口寬度，這意味著視口將會用這個尺寸放大頁面，使所有的元素放進這個視口，從而渲染整個頁面。

各個瀏覽器的預設視口寬度

Safari	Opera	Android WebKit	IE
980px	850px	800px	974px

 

  dp和px的換算公式換算公式px = dp*(dpi/160)

等值的CSS裡面的px在手機螢幕上佔多大的位置，這不是固定的，還要取決於螢幕的DPI。因為手機會根據DPI，對頁面進行自動縮放來協調螢幕像素和尺寸之間的比例來顯示效果,基值是160dpi。意思是160dpi的裝置裡（一般解析度是320*480），1dp = 1px。我們不關注dp是什麼，我們關注的是px，當前裝置的dp:px是多少，也就是頁面在解析度高於或者低於320寬度解析度的時候，對應的縮放比例（其實也就是個概念，就是webkit瀏覽器自己做的縮放，來適配不一樣的裝置。我們只要記住320，1dp=1px就行了，後面的往下看）。

什麼是dp

Density-independent pixels，一個基於電腦座標系統的物理測量單元，代表一個抽象的像素並用於基礎系統的app，如何換算成物理像素，以160PPI螢幕為標準，則1dp=1px

DPI/PPI

Pixels per inch

如何計算解析度

一種在手機尺寸下可以顯示的像素個數，比如，640*960解析度意味著寬度是960個像素而高度是640個像素。

螢幕尺寸

手機螢幕對角線的長度，例如3.5英寸的手機。

計算

px = dp*(dpi/160)

330/160=2.0625

1dp等於2.0625個css px

viewport參數

width	視口寬度，各個瀏覽器的預設視口寬度不同。範圍：200-10,000.也可設成device-width
height	視口高度，範圍：223-10,000 也可設成device-height
initial-scale	頁面首次顯示時的縮放值，範圍由minimum-scale和maximum-scale決定
minimum-scale	頁面顯示時最小的縮放值，預設值：0.25，範圍：>0-10.0
maximum-scale	頁面顯示時最大的縮放值，預設值：5.0，範圍：>0-10.0
user-scalable	決定使用者是否可以放大或者縮小頁面。值可取：yes，no。預設值：yes。設定成no，同時也可以阻止頁面滾動，當輸入文本到文字框的時候。

手機裝置尺寸一覽

http://screensiz.es/phone

 

 

適配方案

160dpi對應典型的解析度是320*480

頁面加meta標籤

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,
minimum-scale=1,maximum-scale=1,user-scalable=no”>

設計稿複製一份，等比例縮放至320px寬度。320px*480是160dpi的典型解析度。因為viewport將頁面寬度設定成device-width，裝置寬度各盡不同，但是基本可以在320寬度的psd裡直接量尺寸，除非一些隨著裝置寬窄會長短不一的文字欄位用響應式布局以外。這時字型大小可以設定成縮放後的字型大小，用px即可。切下原稿上的icon，用css3 query，和backgound-size 縮放。

例如：解析度寬480px的query：@media all and (-webkit-min-device-pixel-ratio:1.5)，background-size按比例設定。