页面自动适配手机电脑设备缩放

49 阅读1分钟

问题:

页面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)
    }