写H5已有一年的时间了，跌入了很多个坑，有时也会重复入一个坑。so,为了少入点坑，总结了一下入坑的原因及解决方案。
1. 在苹果手机上，内嵌在微信APP里的H5页面中一长串数字展示成蓝色并且可以点击呼叫，显示几秒后变成白色。
bug.gif
思考
①并没有给这串字符串添加样式，它为什么是蓝色的呢？
默认情况下，ios会将检测到的一长串数字字符串格式化为电话号码，并将其成为调用该号码的链接
②之后这串字符串为什么变成白色呢？
像①中提到了，ios会将一长串数字字符串作为链接，由于笔者在项目中将css链接颜色设置为白色a {color: #fff;}
解决办法
页面添加 ：
<meta name="format-detection" content="telephone=no" />、
<meta name="format-detection"
默认情况下，ios会将一长串数字字符串识别为电话号码并将其作为链接，使用telephone=no可禁用该特性
2. 苹果手机伪类：active失效
原因:active with Safari on iOS
By default, Safari on iOS does not use the
:activestate unless there is atouchstartevent handler on the relevant element or on the<body>element.
默认情况下，ios中的safari不使用：active，除非在相关元素或者<body>上绑定touchstart事件。
解决办法
页面添加touchstart事件
document.body.addEventListener('touchstart', function () {});
网友评论