H5页面使用JS等比缩放

使用场景

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

使用方法

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

代码

var formatDecimal = function(num, decimal) {
    num = num.toString();
    var index = num.indexOf('.');
    if (index !== -1) {
        num = num.substring(0, decimal + index + 1)
    } else {
        num = num.substring(0)
    }
    return parseFloat(num).toFixed(decimal)
};
var int_w = 375,
    win_w = window.screen.width,
    meta = document.createElement('meta');
document.querySelector('meta[name="viewport"]').remove();
document.getElementsByTagName('head')[0].cssText = 'width:' + int_w + 'px;overflow-x:hidden';
meta.name = 'viewport';
meta.content = 'width=' + (win_w >= int_w ? int_w : win_w) + ', initial-scale=' + formatDecimal(win_w / int_w, 2) + ', user-scalable=no';
document.getElementsByTagName('head')[0].appendChild(meta);