H5开发踩坑(持续更新)

169 阅读2分钟

H5开发过程中,运行在ios上的H5页面,客户的数字id被识别成电话号码能拨打电话

本以为通过以下safari的私有标签能解决此问题 第一个是禁止跳转到地图 第二是电话号码拨打 第三个是对应href的mailto

		<meta name="format-detection" content="adress=no"> 
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="email=no">
                

结果实际测试的时候发现,偶发性的还会在特殊情况下还是被ios识别成手机号码能拨打电话,

image.png

<a  href=" "  dir="ltr"  x-apple-data-detectors="true"  x-apple-data-detectors-type="telephone"  x-apple-data-detectors-result="0">
152050646211
</ a>

实际情况就是数字被添加了样式,被添加了a标签,最后可以通过样式方式来解决

	*[x-apple-data-detectors] {
	border-bottom: 0 !important;
	cursor: default !important;
	color: inherit !important;
	text-decoration: none !important;
	} 

微信分享,分享出来的链接,安卓直接是到首页,ios直接没有分享按钮,然而看了下自己的代码,ok的很,签名什么的都没问题,数据也ok

image.png

image.png

这种情况并非是代码原因导致,是因为微信对中间页的判断导致的,是会被微信拦截掉的,但是在特殊的情况下,自己对自己某些场景,有时候又是可以的,这取决月微信的中间页的定义规范,暂时没有文档说明,所以,还是老老实实的用气泡的方式发送微信分享而不是直接发链接,所以聪明的人会收藏链接以这种场景分享出去或者直接将链接做成二维码发出去(拼dd砍一刀H5有一段时间就是这样的),二维码的方式目前最靠谱最合时宜。 参考链接

针对机型之间的兼容性问题,(hash模式下)针对ios端的微信分享一直很稳定,但是很对安卓的分享分享是正常,但是全部分享到了首页,我是从公众号场景进入的,但是,发现在其他的hash链接又是没问题的

如果针对公众号菜单栏入口场景,配置的链接是xxxx.xxx 而后我改变了入口链接为xxxx.xxx/#/ 清除缓存之后,安卓回到首页的问题解决了,只能理解,微信对哈希链接的分享处理有自己一套方案吧同理也会有遇到history模式下会产生相反的情况,这也需要对症来处理。