记一web项目开发中由于网页缩放而获取页面宽高问题

问题:

今天在网上找了个登录界面的模板准备套用在自己项目中的登录界面时,发现canvas标签的宽度和高度都不是网页页面的宽度和高度,而原来模板的的网页打开却是正常铺满整个页面的。经过查找资料最终了解到,原来是缩放比的问题,由于我在web项目中添加了一个针对125%缩放到80%的css样式,然后在模板的js中在计算canvas的宽高时,就计算错误。

解决办法:

在js中计算宽高的地方乘以一个缩放因子 window.devicePixelRatio 即可。
记一web项目开发中由于网页缩放而获取页面宽高问题