Vueプロジェクトを大画面に適応させる方法の例

モジュール.エクスポート = {
  プラグイン: {
    自動プレフィックス: {},
    'postcss-px2rem-exclude': {
      remユニット: 192
      // 除外: /node_modules|folder_name/i,
    }
  }
}

(関数(win, lib) {
  var doc = win.document
  var docEl = doc.documentElement
  var metaEl = doc.querySelector('meta[name="viewport"]')
  var フレキシブルEl = doc.querySelector('meta[name="フレキシブル"]')
  var dpr = 0
  varスケール = 0
  var tid
  var フレキシブル = lib.フレキシブル || (lib.フレキシブル = {})

  if (メタEl) {
    console.warn('ズーム率は既存のメタタグに従って設定されます')
    var マッチ = metaEl
      .getAttribute('コンテンツ')
      // eslint は次の行を無効にして、無駄なエスケープを禁止します
      .match(/initial\-scale=([\d\.]+)/)
    （一致）の場合{
      スケール = parseFloat(match[1])
      dpr = parseInt(1 / スケール)
    }
  } そうでない場合 (flexibleEl) {
    var コンテンツ = FlexibleEl.getAttribute('コンテンツ')
    if (コンテンツ) {
      // eslint は次の行を無効にして、無駄なエスケープを禁止します
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
      // eslint は次の行を無効にして、無駄なエスケープを禁止します
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
      （初期Dpr）の場合{
        dpr = parseFloat(初期Dpr[1])
        スケール = parseFloat((1 / dpr).toFixed(2))
      }
      （最大Dpr）の場合{
        dpr = parseFloat(最大Dpr[1])
        スケール = parseFloat((1 / dpr).toFixed(2))
      }
    }
  }

  （！dpr && ！スケール）{
    // var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
    var デバイスピクセル比 = win.デバイスピクセル比
    if (isIPhone) {
      // iOS では、2 画面と 3 画面の場合は 2 倍のソリューションを使用し、それ以外の場合は 1 倍のソリューションを使用します if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3
      } そうでない場合 (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2
      } それ以外 {
        dpr = 1
      }
    } それ以外 {
      // 他のデバイスでは、1xソリューションが引き続き使用されますdpr = 1
    }
    スケール = 1 / dpr
  }

  docEl.setAttribute('data-dpr', dpr)
  if (!metaEl) {
    metaEl = doc.createElement('meta')
    metaEl.setAttribute('名前', 'ビューポート')
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
    docEl.firstElementChildの場合{
      docEl.firstElementChild.appendChild(metaEl)
    } それ以外 {
      var wrap = doc.createElement('div')
      wrap.appendChild(メタEl)
      doc.write(wrap.innerHTML)
    }
  }

  関数refreshRem() {
    var 幅 = docEl.getBoundingClientRect().width
    （幅 / dpr > 540）の場合{
      幅 = 幅 * dpr
    }
    var rem = 幅 / 10
    docEl.style.fontSize = rem + 'px'
    フレキシブル.rem = win.rem = rem
  }

  win.addEventListener() 関数は、
    「サイズ変更」、
    関数（） {
      クリアタイムアウト(tid)
      tid = setTimeout(リフレッシュ間隔、300)
    },
    間違い
  ）
  win.addEventListener() 関数は、
    'ページ表示',
    関数(e) {
      if (e.persisted) {
        クリアタイムアウト(tid)
        tid = setTimeout(リフレッシュ間隔、300)
      }
    },
    間違い
  ）

  doc.readyState === '完了'の場合{
    doc.body.style.fontSize = 12 * dpr + 'px'
  } それ以外 {
    doc.addEventListener() 関数は、
      'DOMコンテンツがロードされました'、
      関数（） {
        doc.body.style.fontSize = 12 * dpr + 'px'
      },
      間違い
    ）
  }

  リフレッシュRem()

  フレキシブル.dpr = win.dpr = dpr
  フレキシブル.refreshRem = リフレッシュRem
  フレキシブル.rem2px = 関数(d) {
    var val = parseFloat(d) * this.rem
    （typeof d === 'string' && d.match(/rem$/)）の場合{
      val += 'px'
    }
    戻り値
  }
  フレキシブル.px2rem = 関数(d) {
    var val = parseFloat(d) / this.rem
    if (typeof d === 'string' && d.match(/px$/)) {
      val += 'rem'
    }
    戻り値
  }
})(ウィンドウ、ウィンドウ['lib'] || (ウィンドウ['lib'] = {}))

  関数refreshRem() {
    var 幅 = docEl.getBoundingClientRect().width
    （幅 / dpr > 540）の場合{
      幅 = 幅 * dpr
    }
    var rem = 幅 / 10
    docEl.style.fontSize = rem + 'px'
    フレキシブル.rem = win.rem = rem
  }