移动端Web页面适配方案（附完整代码）

移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

代码如下：

(function (window, document) {
  // 给hotcss开辟个命名空间
  const hotcss = {}
    ; (function () {
      // 根据devicePixelRatio自定计算scale
      // 可以有效解决移动端1px这个世纪难题。
      let viewportEl = document.querySelector("meta[name=\"viewport\"]"),
        hotcssEl = document.querySelector("meta[name=\"hotcss\"]"),
        dpr = window.devicePixelRatio || 1,
        maxWidth = 540,
        designWidth = 0

      dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1)

      // 允许通过自定义name为hotcss的meta头，通过initial-dpr来强制定义页面缩放
      if (hotcssEl) {
        const hotcssCon = hotcssEl.getAttribute("content")
          ; if (hotcssCon) {
            const initialDprMatch = hotcssCon.match(/initial\-dpr=([\d\.]+)/)
            if (initialDprMatch) {
              dpr = parseFloat(initialDprMatch[1])
            }
            const maxWidthMatch = hotcssCon.match(/max\-width=([\d\.]+)/)
            if (maxWidthMatch) {
              maxWidth = parseFloat(maxWidthMatch[1])
            }
            const designWidthMatch = hotcssCon.match(/design\-width=([\d\.]+)/)
            if (designWidthMatch) {
              designWidth = parseFloat(designWidthMatch[1])
            }
          }
      }

      document.documentElement.setAttribute("data-dpr", dpr)
      hotcss.dpr = dpr

      document.documentElement.setAttribute("max-width", maxWidth)
      hotcss.maxWidth = maxWidth

      if (designWidth) {
        document.documentElement.setAttribute("design-width", designWidth)
      }
      hotcss.designWidth = designWidth // 保证px2rem 和 rem2px 不传第二个参数时, 获取hotcss.designWidth是undefined导致的NaN

      let scale = 1 / dpr,
        content = `width=device-width, initial-scale=${scale}, minimum-scale=${scale}, maximum-scale=${scale}, user-scalable=no`
        ; if (viewportEl) {
          viewportEl.setAttribute("content", content)
        }
      else {
        viewportEl = document.createElement("meta")
          ; viewportEl.setAttribute("name", "viewport")
          ; viewportEl.setAttribute("content", content)
        document.head.appendChild(viewportEl)
      }
    })()

  hotcss.px2rem = function (px, designWidth) {
    // 预判你将会在JS中用到尺寸，特提供一个方法助你在JS中将px转为rem。就是这么贴心。
    if (!designWidth) {
      // 如果你在JS中大量用到此方法，建议直接定义 hotcss.designWidth 来定义设计图尺寸;
      // 否则可以在第二个参数告诉我你的设计图是多大。
      designWidth = parseInt(hotcss.designWidth, 10)
    }

    return parseInt(px, 10) * 320 / designWidth / 20
  }

  hotcss.rem2px = function (rem, designWidth) {
    // 新增一个rem2px的方法。用法和px2rem一致。
    if (!designWidth) {
      designWidth = parseInt(hotcss.designWidth, 10)
    }
    // rem可能为小数，这里不再做处理了
    return rem * 20 * designWidth / 320
  }

  hotcss.mresize = function () {
    // 对，这个就是核心方法了，给HTML设置font-size。
    let innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth

    if (hotcss.maxWidth && (innerWidth / hotcss.dpr > hotcss.maxWidth)) {
      innerWidth = hotcss.maxWidth * hotcss.dpr
    }

    if (!innerWidth) {
      return false
    }

    document.documentElement.style.fontSize = `${innerWidth * 20 / 320}px`
      ; hotcss.callback && hotcss.callback()
  }

  hotcss.mresize()
  // 直接调用一次

  window.addEventListener("resize", () => {
    clearTimeout(hotcss.tid)
      ; hotcss.tid = setTimeout(hotcss.mresize, 33)
  }, false)
  // 绑定resize的时候调用

  window.addEventListener("load", hotcss.mresize, false)
  // 防止不明原因的bug。load之后再调用一次。


  setTimeout(() => {
    hotcss.mresize()
    // 防止某些机型怪异现象，异步再调用一次
  }, 333)

  window.hotcss = hotcss
  // 命名空间暴露给你，控制权交给你，想怎么调怎么调。
})(window, document)

webpack.config.js

entry: ['./app/js/viewport.js','./app/js/main.js'],

标签：Web,scale,dpr,maxWidth,适配,designWidth,document,hotcss,页面
来源： https://blog.csdn.net/weixin_42321819/article/details/120138140