vue 实现手机端开发 分辨率问题

一、修改postcssrc.js 文件

const pxtorem = require('postcss-pxtorem');
module.exports = {
    plugins: [
        require('autoprefixer'),
        pxtorem({
            rootValue: 100,
            propWhiteList: []
        })
    ]
}

二、index.html文件


三、static 目录中放入meta.js文件,并在index.html文件中引入

(function(baseFontSize,fontscale){var _baseFontSize=baseFontSize||100;var _fontscale=fontscale||1;var win=window;var doc=win.document;var ua=navigator.userAgent;var matches=ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);var UCversion=ua.match(/U3\/((\d+|\.){5,})/i);var isUCHd=UCversion&&parseInt(UCversion[1].split(".").join(""),10)>=80;var isIos=navigator.appVersion.match(/(iphone|ipad|ipod)/gi);var dpr=win.devicePixelRatio||1;if(!isIos&&!(matches&&matches[1]>534)&&!isUCHd){dpr=1}var scale=1/dpr;var metaEl=doc.querySelector('meta[name="viewport"]');if(!metaEl){metaEl=doc.createElement("meta");metaEl.setAttribute("name","viewport");doc.head.appendChild(metaEl)}metaEl.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+scale+",maximum-scale="+scale+",minimum-scale="+scale);doc.documentElement.style.fontSize=_baseFontSize/2*dpr*_fontscale+"px";window.viewportScale=dpr})(100,1);

四、所有字体大小、图片 都使用二倍大小

你可能感兴趣的:(vue 实现手机端开发 分辨率问题)