当前位置: 代码迷 >> 综合 >> H5屏幕宽度大小自适应方式
  详细解决方案

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

热度:88   发布时间:2024-02-07 07:53:06.0

将宽度固定为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);}
}

 

  相关解决方案