写H5已有一年的时间了,跌入了很多个坑,有时也会重复入一个坑。so,为了少入点坑,总结了一下入坑的原因及解决方案。
1. 在苹果手机上,内嵌在微信APP里的H5页面中一长串数字展示成蓝色并且可以点击呼叫,显示几秒后变成白色。
思考
①并没有给这串字符串添加样式,它为什么是蓝色的呢?
默认情况下,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
:active
state unless there is atouchstart
event handler on the relevant element or on the<body>
element.
默认情况下,ios中的safari不使用:active
,除非在相关元素或者<body>
上绑定touchstart
事件。
解决办法
页面添加touchstart
事件
document.body.addEventListener('touchstart', function () {});