移动端适配方案

首页 > 我的学习历程作者：月丶 2019年10月17日 15:53 星期四热度：1798° 百度已收录

时间：2019-10-17 15:53 热度：1798°

rem方案：安装amfe-flexible，postcss，及postcss插件postcss-pxtorem。

	import 'amfe-flexible/index.js' 

		"postcss": {
	
		    "plugins": {
	
		      "autoprefixer": {
	
		        "browsers": [
	
		          "Android >= 4.0",
	
		          "iOS >= 7" 
	
		        ]
	
		      },
	
		      "postcss-pxtorem": {
	
		        "rootValue": 37.5,
	
		        "propList": [
	
		          "*" 
	
		        ]
	
		      }
	
		    }
	
		  },

这是vue中的配置方案，在入口文件main.js引入amfe-flexible，然后在package.json配置postcss-pxtorem。配置好后，在代码中即可使用px作为单位，编译出来会自动转换成rem，不用再人工计算。

解决iphone点击300ms延迟

点击延迟的原因是要检测是否双击

1、fastclick.js 引入js

2、touch-action: manipulation;

MDN解释：

manipulation

浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。这是“pan-x pan-y pinch-zoom”（为了兼容性本身仍然有效）的别名。

兼容性：https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

pointer-events: none; 元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的

禁止微信H5页面修改字号大小

		body {
	
		      /* IOS禁止微信调整字体大小 */ 
	
		      -webkit-text-size-adjust: 100% !important;
	
		      text-size-adjust: 100% !important;
	
		      -moz-text-size-adjust: 100% !important;
	
		    }

		<script> 
	
		  (function () {
	
		    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
	
		      handleFontSize();
	
		    } else {
	
		      if (document.addEventListener) {
	
		        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
	
		      } else if (document.attachEvent) {
	
		        document.attachEvent("WeixinJSBridgeReady", handleFontSize);
	
		        document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
	
		      }
	
		    }
	
		    function handleFontSize() {
	
		      // 设置网页字体为默认大小 
	
		      WeixinJSBridge.invoke('setFontSizeCallback', {
	
		        'fontSize': 0 
	
		      });
	
		      // 重写设置网页字体大小的事件 
	
		      WeixinJSBridge.on('menu:setfont', function () {
	
		        WeixinJSBridge.invoke('setFontSizeCallback', {
	
		          'fontSize': 0 
	
		        });
	
		      });
	
		    }
	
		  })();
	
		</script>