场景:
使用<a>标签 tel:协议,一键拨打电话功能下,正对含有分机号的情况,通常是拨打分机号后需以“#”结束,
App端能识别“#”,IOS、Android操作系统上的部分浏览器上不能识别“#”,将其解析成“%23”,
或者不识别“#”。
解决方案:
经查证浏览器解析该字符是会进行转码成16进制字符,经实践,将“#”字符写成“%23”,在使用H5中一键拨打电话Tel:协议时可以正常除。
示例代码:
var tel = ‘400-610-1360转301661’;
tel = popTel.replace('转',',,')
//tel +=’#’; 错误方式
tel +=’%23’;
<a id="callHotLine" href="javascript:;" class="call">拨打热线
$(‘#callHotLine’).attr(‘href’,tel);
2、H5 本地存储(localStorage) 兼容性问题场景:
IOS操作系统下Safari浏览器下使用H5本地存储localStorage无效,并报js错误,造成使用localStorage一下的脚本不能执行。
解决方案:
经实践,采用cookie存储数据方式可以支持IOS操作系统下Safari浏览器的无痕浏览模式。
代码示例:
localStorage.vipflag = ‘1’;//无痕浏览模式下该语句报错,造成后面的语句不能执行
引入jquery.cookie.js文件使用如下方式存储数据
$.cookie('vipflag','1');
3、background图被边界切割掉的问题:
问题描述:每个输入框都会再有边靠边界地方增加一个叉号,往往是UI给提供的背景图,需要开发人员通过css样式表添加进去,在添加调试的过程中会遇到兼容性的问题,iPhone类型的手机显示正常,如iPhone6/6s等,安卓部分手机显示正常,如乐视,魅族等,但是华为、小米有些机型不大正常,经常会出现北京图被边界切掉了,经过查询资料,我们可以让北京图不依靠边界border展示,而是依靠padding展示,将background-origin设置成content-box,将padding边界设置成大小合适的即可
background详细介绍请参照 链文background详解 http://www.daqianduan.com/3302.html
inline-block问题:<div><span></span><span></span><span></span></div> 对span标签使用inline-block样式,每个span标签占屏幕三分之一宽度,发现会出现折行,是因为line-block标签会存在默认间距,可以使用float:left消除改间隙,也可以使用margin-left设置负边距消除改间隙,方案消除间隙, 可以将 inline-block 元素的父元素font-size设置为0
还可以采用下文中的 https://www.cnblogs.com/bigboyLin/p/4624805.html 的方案