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