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

问题:css

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

解决办法:canvas

在js中计算宽高的地方乘以一个缩放因子 window.devicePixelRatio 便可。
在这里插入图片描述svg