动态设置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失效