Vue2.0 implementiert adaptive Auflösung

importiere '@/utils/flexibleEx.js'

(Funktion(win, lib) {
  var doc = win.document
  var docEl = doc.documentElement
  var metaEl = doc.querySelector('meta[name="viewport"]')
  var flexibleEl = doc.querySelector('meta[name="flexible"]')
  var dpr = 0
  var Skala = 0
  var tid
  var flexible = lib.flexible || (lib.flexible = {})
 
  wenn (MetaEl) {
    console.warn('Der Zoomfaktor wird entsprechend den vorhandenen Meta-Tags eingestellt.')
    var match = metaEl
      .getAttribute('Inhalt')
      .match(/initial\-scale=([\d\.]+)/)
    wenn (Übereinstimmung) {
      Skala = parseFloat(Übereinstimmung[1])
      dpr = parseInt(1 / Skala)
    }
  } sonst wenn (flexibleEl) {
    var Inhalt = flexibleEl.getAttribute('Inhalt')
    wenn (Inhalt) {
      var initialDpr = Inhalt.match(/initial\-dpr=([\d\.]+)/)
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
      wenn (initialDpr) {
        dpr = parseFloat(initialDpr[1])
        Skala = parseFloat((1 / dpr).toFixed(2))
      }
      wenn (maximalDpr) {
        dpr = parseFloat(maximumDpr[1])
        Skala = parseFloat((1 / dpr).toFixed(2))
      }
    }
  }
 
  wenn (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi)
    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
    var devicePixelRatio = win.devicePixelRatio
    wenn (istIPhone) {
      // Unter iOS verwenden Sie für 2 und 3 Bildschirme die 2x-Lösung und für den Rest die 1x-Lösung if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3
      } sonst wenn (Gerätepixelverhältnis >= 2 und (!dpr || dpr >= 2)) {
        dpr = 2
      } anders {
        dpr = 1
      }
    } anders {
      // Für andere Geräte wird weiterhin die 1x-Lösung verwendet dpr = 1
    }
    Maßstab = 1 / dpr
  }
 
  docEl.setAttribute('data-dpr', dpr)
  wenn (!metaEl) {
    metaEl = doc.createElement('meta')
    metaEl.setAttribute('Name', 'Ansichtsfenster')
    metaEl.setAttribute(
      'Inhalt',
      'Anfangsmaßstab=' +
            Maßstab +
            ', maximaler Maßstab =' +
            Maßstab +
            ', Mindestmaßstab=' +
            Maßstab +
            ', benutzerskalierbar=nein'
    )
    wenn (docEl.erstesElementKind) {
      docEl.firstElementChild.appendChild(metaEl)
    } anders {
      var wrap = doc.createElement('div')
      wrap.appendChild(metaEl)
      doc.write(innerHTML umschließen)
    }
  }
 
  Funktion refreshRem() {
    const weiße Liste = [
      '/managementKanban',
      '/ProduktionKanban',
      '/Bedienfeld',
      '/hauptsächlich'
    ] // Whitelist-Routen nicht umleiten var width = docEl.getBoundingClientRect().width
    var rem = 0
 
    var hrefList = window.location.href.split('/')
    var url = hrefList[hrefList.Länge - 1]
    var url0 = url.split('?')
    var urlEnd
    wenn (url0.Länge > 0) {
      urlEnd = url0[0]
    }
    wenn (!whiteList.includes('/' + urlEnd)) {
      wenn (Breite / dpr <= 1980 und Breite / dpr > 768) {
        Breite = 1980 * dpr
        rem = Breite / 48
      } sonst wenn (Breite / dpr >= 5760) {
        Breite = 5760 * dpr
        rem = Breite / 48
      } anders {
        Breite = 540 * dpr
        rem = Breite / 20
      }
      docEl.style.fontSize = rem + 'px'
      flexible.rem = win.rem = rem
    }
  }
 
  win.addEventListener(
    'Größe ändern',
    Funktion() {
      Zeitüberschreitung löschen(tid)
      tid = setzeTimeout(refreshRem, 300)
    },
    FALSCH
  )
  win.addEventListener(
    "DOMNodeEingefügt",
    Funktion() {
      Zeitüberschreitung löschen(tid)
      tid = setzeTimeout(refreshRem, 50)
    },
    FALSCH
  )
  win.addEventListener(
    'Seitenshow',
    Funktion(e) {
      wenn (e.persistent) {
        Zeitüberschreitung löschen(tid)
        tid = setzeTimeout(refreshRem, 300)
      }
    },
    FALSCH
  )
 
  wenn (doc.readyState === 'abgeschlossen') {
    doc.body.style.fontSize = 12 * dpr + 'px'
  } anders {
    doc.addEventListener(
      „DOMContentLoaded“,
      Funktion(e) {
        doc.body.style.fontSize = 12 * dpr + 'px'
      },
      FALSCH
    )
  }
 
  aktualisierenRem()
 
  flexible.dpr = win.dpr = dpr
  flexible.refreshRem = aktualisierenRem
  flexible.rem2px = Funktion(d) {
    var val = parseFloat(d) * this.rem
    wenn (Typ von d === 'Zeichenfolge' und d.match(/rem$/)) {
      Wert + = "px"
    }
    Rückgabewert
  }
  flexible.px2rem = Funktion(d) {
    var val = parseFloat(d) / dies.rem
    wenn (Typ von d === 'Zeichenfolge' und d.match(/px$/)) {
      Wert + = "rem"
    }
    Rückgabewert
  }
})(Fenster, Fenster['lib'] || (Fenster['lib'] = {}))

Funktion generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader] : [cssLoader];
 
    wenn (Lader) {
      loaders.push({
        Lader: Lader + "-Lader",
        Optionen: Objekt.assign({}, loaderOptions, {
          Quellkarte: Optionen.Quellkarte
        })
      });
    }
 
    // CSS extrahieren, wenn diese Option angegeben ist
    // (was während der Produktionserstellung der Fall ist)
    wenn (Optionen.extrahieren) {
      returniere ExtractTextPlugin.extract({
        Einsatz: Lader,
        Fallback: „Vue-Style-Loader“,
        öffentlicher Pfad: "../../"
      });
    } anders {
      Geben Sie ["vue-style-loader"].concat(loader) ein.
    }
  }

modul.exporte = {
    Plugins: {
        'Autoprefixer': {
            Browserliste überschreiben: [
                „Android 4.1“,
                „iOS 7.1“,
                'Chrome > 31',
                'ff > 31',
                'dh >= 8'
            ]
        },
        'postcss-pxtorem': {
            Wurzelwert: 37,5,
            Eigenschaftenliste: ['*']
        }
    }
}