H5入坑之路

写H5已有一年的时间了，跌入了很多个坑，有时也会重复入一个坑。so,为了少入点坑，总结了一下入坑的原因及解决方案。

1. 在苹果手机上，内嵌在微信APP里的H5页面中一长串数字展示成蓝色并且可以点击呼叫，显示几秒后变成白色。

bug.gif

思考

①并没有给这串字符串添加样式，它为什么是蓝色的呢？
    默认情况下，ios会将检测到的一长串数字字符串格式化为电话号码，并将其成为调用该号码的链接

②之后这串字符串为什么变成白色呢？
    像①中提到了，ios会将一长串数字字符串作为链接，由于笔者在项目中将css链接颜色设置为白色a {color: #fff;}

解决办法

页面添加 ：

、

默认情况下，ios会将一长串数字字符串识别为电话号码并将其作为链接，使用telephone=no可禁用该特性

2. 苹果手机伪类：active失效

原因:active with Safari on iOS

By default, Safari on iOS does not use the :active state unless there is a touchstartevent handler on the relevant element or on the element.


默认情况下，ios中的safari不使用：active，除非在相关元素或者上绑定touchstart事件。

解决办法

页面添加touchstart事件

document.body.addEventListener('touchstart', function () {});

相关文档

---

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW1