vue 移动端适配

vue适配：以750设计稿为基准，在不同屏幕尺寸下如何适配

// 安装postcss-pxtorem  会自动把px转化成rem的插件
cnpm i postcss-pxtorem

// 在postcss.config.js配置
module.exports = {
  plugins: {
    'postcss-pxtorem': { 
      rootValue: 32, 
      propList: ['*'], 
      minPixelValue: 2 
    }
  }
};
/* 
rootValue：这里就是根目录的字体大小是32px，一般设计稿是750，比iphone6的大一倍，所以设置成16的两倍，就是32px;
proplist：就是那些属性需要转换成rem，这里是全部的意思
minPixelValue：就是最小转换单位，这是最小转换单位是2px的意思
*/

// js动态改变根节点
(function() {
    function autoRootFontSize() {
        document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width)  /  750 * 32 + 'px';
    }
    window.addEventListener('resize', autoRootFontSize);
    autoRootFontSize();
})();

Safari中设置了禁止用户缩放无效的问题： iOS 10开始，meta设置在Safari内无效了

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<script>
    window.onload=function () {
    document.addEventListener('touchstart',function (event) {
        if(event.touches.length>1){
            event.preventDefault();
        }
    });
    var lastTouchEnd=0;
    document.addEventListener('touchend',function (event) {
        var now=(new Date()).getTime();
        if(now-lastTouchEnd<=300){
            event.preventDefault();
        }
        lastTouchEnd=now;
    },false);
    document.addEventListener('gesturestart', function (event) {
        event.preventDefault();
    });
}
</script>