webapp尺寸，webapp設計尺寸

webapp尺寸，webapp設計尺寸
一、viewport寬度

起源：PC端的網站要顯示在移動端有什麼問題？

• 如果把移動端的可是地區設定到（320-768）的話，大部分網站都會因為太窄而顯示錯亂
• 所以瀏覽器預設把viewport【這個viewport指的是layout viewport】設定為一個較寬的值980px或者1024px，至少保證PC網站在移動端上可以顯示，只是超出部分出行橫向滾動。

二、概念1、css像素

• html頁面中單位是px，在pc中往往1 css px=1物理像素
• css像素是相對值，在不同裝置中1px對應不同的裝置像素；iphone3的解析度是320*480即1px=1物理像素；iphone4解析度640*960但是螢幕尺寸沒變，意味著同一塊地區像素多了1倍，即1 css px=2物理像素。

2、物理像素

•  表示每英寸所擁有的像素數目，數值越高，代表螢幕能夠以更高的密度來顯示映像

3、解析度

• 顯示器能夠顯示的像素多少，顯示器可以顯示的像素越多，畫面就越精細，同樣的螢幕地區能顯示的資訊就越多。

4、devicePixelRatio

• window.evicePixelRatio=物理像素/css像素。在iphone4中devicePixelRatio=2也就是1 css像素=2個物理像素。
• devicePixelRatio在不同瀏覽器中存在一些相容性問題，並不是完全可靠的。

5、布局視口layout viewport

• 行動裝置的預設viewport,css布局是以layout viewpot來作為參考系計算的。
• document.documentElement.clientWidth擷取
• 該尺寸可動態設定。

6、展示視口visual viewport

• 代表瀏覽器可視地區的尺寸。當使用者放大瀏覽器時這個尺寸就會變小
• window.innerWidth擷取

7、ideal viewport

• 螢幕尺寸 裝置螢幕的尺寸 單位是物理像素
• screen.width擷取 螢幕尺寸是不變的
• 在該viewport中使用者不需要縮放和橫向滾動就可以正常查看網站的所有內容
• 設定移動端網站一般以這個viewport為準，ideal viewport的寬度等於裝置螢幕寬度，使得無論在什麼解析度下，那些針對ideal viewport設計的網站都可以完美的呈現給使用者。

三、螢幕適配

為了能在移動端正常顯示PC端的頁面，把viewport設定為一個較寬的值，這個viewport是layout viewport。

因為layout viewport的寬度大於瀏覽器可視地區的寬度，所以需要一個viewport來代表瀏覽器可視地區的大小，這就是visual viewport。

許多網站為行動裝置單獨設計，所以需要一個能完美適配行動裝置的viewport，這個就是ideal viewport。完美適配就是永恒不需要縮放，不需要橫向捲軸就能正常查看網站的所有內容。

ideal viewport沒有固定尺寸，不同裝置擁有不同的ideal viewport。所有的iphone的ideal viewport都是320px，無論螢幕是320還是640,安卓就比較複雜了，有320px的，有360px的，有384px的等等，關於不同的裝置ideal viewport的寬度都為多少，可以到http://viewportsizes.com去查看一下，裡面收集了眾多裝置的理想寬度。

把行動裝置上的viewport分為layout viewport  、 visual viewport   和 ideal viewport  三類，其中的ideal viewport是最適合行動裝置的viewport，ideal viewport的寬度等於行動裝置的螢幕寬度，只要在css中把某一元素的寬度設為ideal viewport的寬度(單位用px)，那麼這個元素的寬度就是裝置螢幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在於，無論在何種解析度的螢幕下，那些針對ideal viewport 而設計的網站，不需要使用者手動縮放，也不需要出現橫向捲軸，都可以完美的呈現給使用者。

行動裝置預設的viewport是layout viewport，也就是那個比螢幕要寬的viewport，但在進行行動裝置網站的開發時，我們需要的是ideal viewport。那麼怎麼才能得到ideal viewport呢？這就該輪到meta標籤出場了。讓布局視口寬度就是展示視口。

<meta name="viewport" content="width=device-width">

參考：

http://www.ituring.com.cn/article/130015

http://www.cnblogs.com/2050/p/3877280.html