问题:
页面css非按百分比,设置了固定px宽度、高度,如何快速、方便,让页面按手机设备自动设配页面缩放?
通常几种方法:
1、mata viewport
2、flex布局
3、rem
这里主要记录一下meta viewport方案
Viewport 基础
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, viewport-fit=contain">
- width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例
- maximum-scale:允许用户缩放到的最大比例
- minimum-scale:允许用户缩放到的最小比例
- user-scalable:用户是否可以手动缩放
// 设计稿方案
const viewportWidth = 1920;
const clientWidth = document.documentElement.clientWidth;
const viewport = document.querySelector('meta[name="viewport"]');
// 计算缩放比
const viewportScale = clientWidth / viewportWidth;
viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', minimum-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
if (document.addEventListener) {
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
console.log("resizeEvt",resizeEvt)
window.addEventListener(resizeEvt, setRem, false)
document.addEventListener('DOMContentLoaded', setRem, false)
}