H5屏幕宽度大小自适应方式

将宽度固定为750px;

通过获取屏幕宽度与750的比例关系将所有样式宽高按照相对应的比例缩放:

remChange();
window.addEventListener('resize', remChange);
function remChange() {
    remove();
    let width = window.screen.width;
    let fixedw = 750;
    let scale = width / fixedw; //获取到的屏幕宽度比上自定义的750宽度 获得对应比例
    let meta = document.createElement("meta");
    meta.setAttribute('name', 'viewport');
    //将对应比例填入meta标签即可实现宽度自适应
    meta.setAttribute('content', `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`);
    //meta将标签添加到文档中即可
    document.head.appendChild(meta);
}
function remove() {
    let meta = document.querySelector("meta[name='viewport']");
    if (meta != null) {
        document.head.removeChild(meta);
    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值