H5页面使用JS等比缩放

使用场景

在制作H5页面的时候，经常遇到设备端分辨率的不一样，导致的实际显示效果与设计差别很大，这时候就需要以下JavaScript代码，自动根据设备分辨率缩放页面大小，从而显示和设计一样的页面效果。

使用方法

将下方代码的375修改为你设计、测试、制作页面时候使用的分辨率宽度，然后将代码放到H5页面头部即可

代码

let lcms_scale_int_w=375,lcms_scale_format=function(num,decimal){num=num.toString();let index=num.indexOf(".");if(-1!==index){num=num.substring(0,decimal+index+1)}else{num=num.substring(0)}return parseFloat(num).toFixed(decimal)},lcms_scale_math=function(){let lcms_scale_win_w=window.screen.width,lcms_scale_meta=document.createElement("meta");document.querySelector(`meta[name="viewport"]`).remove();document.getElementsByTagName("head")[0].cssText=`width:${lcms_scale_int_w}px;overflow-x:hidden`;lcms_scale_meta.name="viewport";lcms_scale_meta.content="width="+(lcms_scale_win_w>=lcms_scale_int_w?lcms_scale_int_w:lcms_scale_win_w)+", initial-scale="+lcms_scale_format(lcms_scale_win_w/lcms_scale_int_w,2)+", user-scalable=no";document.getElementsByTagName("head")[0].appendChild(lcms_scale_meta)};lcms_scale_math();window.addEventListener("resize",(function(){lcms_scale_math()}));