動態設置viewport的寬高

先貼代碼

See the Pen egpDo by 劉志剛 (@liuzhigang) on CodePen.

DEMO中須要瞭解的模塊：

HTML中id是stage的div是遊戲總容器，

JS中的setViewport函數做用是設置視口寬高；

css樣式主要是爲了讓stage元素在手機瀏覽器中豎直和水平居中；

須要瞭解的術語（術語引自https://developers.google.com/speed/docs/insights/ConfigureViewport）：

• 硬件像素：顯示器的物理像素。例如，iPhone 5所配屏幕的水平硬件像素爲640。
• 設備無關像素(dip)：在正常視距下，符合統一參考像素的設備像素比例，此像素在全部設備上大小几乎相同。iPhone 5的設備無關像素寬度爲320。
• CSS像素：用於頁面佈局的單位，由視口控制。樣式的像素尺寸（例如width: 100px）是以CSS像素爲單位指定的。CSS像素與設備無關像素的比例即爲網頁的比例係數或縮放級別。

視口（即viewport）中的initial-scale,minimum-scale,maximum-scale三個比例係數均是指CSS像素與設備無關像素的比例，當設置width=device-width時，initial-scale默認爲1.0。

在當前網頁縮放係數爲1.0的狀況下下，當設置width=device-width時，也就是設置當前視口寬度爲屏幕寬度（注：後面說到的屏幕寬度都是以設備無關像素爲單位）；

在當前網頁縮放係數爲1.0的狀況下下，假如設置width爲具體的數值（此數值以CSS像素爲單位），則視口寬度或者小於屏幕寬度，或者大於等於屏幕寬度。這種狀況下，若是要讓視口與屏幕等寬,可經過調節比例係數來達到。

爲了讓stage元素在任何寬高比的屏幕中都能徹底顯示，須要進行兩種狀況下的寬高比的比較，並進行相應的設置，以下圖

對應代碼以下，詳細代碼請參見上部

   if(scale1>scale2){
                width=Math.floor(h*scale1);
                height=h;
            }else{
                height=Math.floor(w/scale1);
                width=w;
            }

 PS：一、在chrome移動版中，若是先不讀取document.documentElement，會存在讀取window.innerWidth的數值不正確的狀況，加上了就不會，不止爲什麼。。。

　　  二、在微信內置瀏覽器中，若是設置user-scalable=no，會致使initial-scale,minimum-scale,maximum-scale失效