web移动端电话号码识别差异iOSSafari（其他浏览器和Android不会）会将那些看起来像电话号码的数字视为电话链接，例如：7-位数字，形式为：1234567带括号和加号的数字，形式为：(+86)123456789双连号，形式为：00-00-0011111-位数字，形式为:13800138000关闭识别开启识别123456输入框阴影差异说明：开启iOS，输入框默认有内部阴影，不能使用box-shadow清除：input,textarea{/*方法一：去除边框*/border:0;/*方法二：边框颜色透明*/border-color:transparent;/*方法三：重复设置输入框的默认外观*/-webkit-appearance:none;appearance:none;}android系统中的元素被点击时，会产生边框描述：有的android系统点击链接，会出现边框或者半透明的灰色遮罩，不同的制作效果和定义的不一样供应商解决：a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)-webkit-user-modify:read-write-plaintext-only;}iOS滑动不流畅说明：iOS手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止移动。整体表现为滑动不顺畅，没有滑动惯性。解决方法：对于iOS5.0及之后的版本，定义了sliding、auto和touch两个值，默认值为auto。在滚动容器上添加滚动触摸方法。wrapper{-webkit-overflow-scrolling:touch;}设置溢出：设置外部溢出为隐藏，设置内容元素溢出为自动。当内部元素超出body时，发生滚动，body超出的部分被隐藏。body{overflow-y:hidden;}.wrapper{overflow-y:auto;}MDN定义：-webkit-overflow-scrolling属性控制元素是否在移动设备上使用滚动回弹效果。auto：使用正常滚动，当手指离开触摸屏，滚动立即停止。touch：使用带有弹跳效果的滚动，当手指离开触摸屏时，内容会继续滚动一段时间。持续滚动的速度和持续时间与滚动手势的强度成正比。它还创建了一个新的堆栈上下文。移动端点击画面有200-300ms的延迟，PC端没有问题。描述：移动设备上的网页有300ms的延迟，经常会导致按钮延迟甚至无法点击。解决方法：fastclick可以解决手机点击事件300ms的延迟。zepto的触摸模块。点击事件也是为了解决点击的延迟问题。iOS上拉边框下拉出现空白，安卓没有说明：用手指按住屏幕往下拉，屏幕上方会多出一块白色区域。手指按住屏幕向上拉，底部会多出一块白色区域。安卓没有这个功能。在iOS中，当手指在屏幕上按住并上下拖动时会触发touchmove事件。这个事件触发的对象是整个webview容器，容器自然会被拖动，剩下的就是空白。解决方法：document.body.addEventListener('touchmove',function(e){if(e._isScroller)return//防止默认事件e.preventDefault()},{passive:false})IOS日期格式转换NAN问题描述：在iOS系统中，JS将字符串转换为日期对象时，字符串格式必须用/隔开，一般用-隔开。微信小程序的iOS环境也会出现这个问题。iOS系统响应js中新增的Date()方法。有格式要求letdt=newDate("2019-07-2419:57")//写法不对//dt会返回有效的Dateletdt=newDate("2019/07/2419:57")//正确的写法：'yyyy-MM-dd'.replace(/-/g,'/')forstringmatchingconversionIOSkeyboardpopupandblockstheoriginalview说明：ios的意思是当键盘被唤醒时，整个页面会被键盘压缩，也就是说页面的高度变小，所有固定的都变成绝对的，而在android中，唤起的键盘覆盖在页面上，页面不会被压缩.可以通过监听移动端的软键盘弹出Element.scrollIntoViewIfNeeded(Boolean)方法用于将不在浏览器窗口可见区域内的元素滚动到浏览器窗口可见区域。如果元素已经在浏览器窗口的可见区域内，则不会发生滚动。Element.scrollIntoView()上的MDN链接Element.scrollIntoViewIfNeeded()上的MDN链接window.addEventListener('resize',function(){if(document.activeElement.tagName==='INPUT'||document.activeElement.tagName==='TEXTAREA'){window.setTimeout(function(){if(document.activeElement中的'scrollIntoView'){document.activeElement.scrollIntoView(false)}else{document.activeElement.scrollIntoViewIfNeeded(false)}},0)}})onkeyUp和onKeydown兼容差异使用input来监视键盘keyup和keydown事件。在安卓手机浏览器中没有问题，但是在ios手机浏览器中输入后，keyup和keydown事件并没有立即响应。Indirect在文本输入（中文输入法）下，判断受限，只有选中单词后才会触发输入事件。说明：在使用oninput监听输入框内容变化时，我们期望oninput事件只有在值发生变化时才会触发。中文输入下，没有选中单词时的按钮也会触发oninput事件。关键解决：compositioneventcompositonstart：输入法的文本合成系统打开时触发，表示要开始输入。例如（输入法出现的瞬间）compositionupdate：在输入域中插入新字符时触发（在使用输入法输入的过程中）compositionend：输入法编辑器的文本排版系统关闭时触发，表示回到正常的键盘输入状态（文本被选中，输入法消失的时刻）。判断限制：$('#input').on('compositionend',function(e){varlen=$(this).val().length;if(len>16){//提示超过16个字符}});输入事件在单词选择后触发：vartyping=false;$('#ipt').on('compositionstart',function(){typing=true;})$('#ipt').on('compositionend',function(){typing=false;})//oninput在oncompositionend执行之前，需要添加一个定时器$('#ipt').on('input',function(){setTimeout(function(){if(!typing){//Todosomething...}},0);})微信小程序webp格式不支持IOS说明：小程序内部，IOS不支持webp格式，Android支持；时间：201908setData设置KB数错误说明：虽然官方文档在设置数据的时候说setData不能超过1024KB，但是IOS下小程序单次设置的数据不能超过1024kB，设置会有问题，有安卓没问题；时间：201908IOS系统微信版本兼容性说明：IOS8系统只能兼容微信最高版本6.72，IOS系统9可以兼容微信7.0.0及以上版本。wx.onSocket断开后，重新发送链接。IOS和Android的区别说明：wx.onSocket链接手动断开网络后，IOS会继续发送请求然后连接到onSocketOpen，Android不会。解决方法是做一个定时器启动链接时间：201908部分安卓机点击键盘发送相同内容说明：部分安卓机，如oppo，快速点击键盘发送，会发送2条相同内容内容，防抖和节流不会生效；时间：201907WeChat♂Android微信授权重定向到回调中带#的URL会出现空白说明：Android手机微信授权回调函数中重定向到的URL不能包含#，但是#可以放在最后。例如：http://www.xuejiehome.com/#/home，跳转到微信授权后，回调接口再次跳转到页面原地址时，微信显示空白。IOS没有这个问题。例如：http://www.xuejiehome.com/#/home，跳转到微信授权后，回调接口再次跳转到http://www.xuejiehome.com/#/h...，在地址末尾加一个参数，在微信中为空。例如：http://www.xuejiehome.com/#/home跳转到微信授权后，回调接口再次跳转到http://www.xuejiehome.com/?ar...即在前面加一个#home参数，页面跳转正常。经查，原因如下：原来是缓存引起的，因为#号后面的参数被忽略了，那么#号之前的u??rl和授权前后的授权是一致的，不会发送a网页请求重新获取但直接读取fetchcache。解决方法：刷新需要跳转到的URL，可以使用PHPHeader跳转，默认header不刷新。header("刷新:0;url={$go}");或者输出js脚本跳转：echo"";积累中，如有错误请指正。
