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

转载于:https://www.cnblogs.com/webjs/p/3871462.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值