動態設置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：1、在chrome移動版中，如果先不讀取document.documentElement，會存在讀取window.innerWidth的數值不正確的情況，加上了就不會，不止為何。。。

　　  2、在微信內置瀏覽器中，如果設置user-scalable=no，會導致initial-scale,minimum-scale,maximum-scale失效