移动端的那些坑

javascript admin 1700 0 评论

 

iOS Safari

  • Safari下使用border-image,不能设置border-color: transparent
  • 使用<meta name=”format-detection” content=”telephone=no” />解决连续数字误识别为电话号码导致样式出错的问题。
  • Safari的iframe会自动去适应内容大小而无视CSS中设置的width,该特性只能通过scrolling="no"属性关闭,并通过设置如下CSS样式设置width:width: 1px; min-width: 100%;;但是设置scrolling="no"会导致安卓下iframe无法滑动,目前只能通过UA设备判断解决。
  • Safari 10以下的flex布局不认widthflex-basis,但是会认min-width,详见Can I UseflexKnown issue第一条。
  • 在 Safari 中,setTimeout 无法触发 focus 事件,且不支持 autofocus 属性。可以使用Promise.resolve().then()来执行需要异步的 focus 代码。
  • iOS 10 safari 会无视meta user-scalable=no,需要用e.preventDefault来解决。个人解决方案mobile-polyfill/ios10-user-scalable-no.js。建议结合ua-parser-js使用,因为iOS 10+的其他浏览器(QQ、UC)等都还是尊敬这个东西的。
  • Safari下开无痕浏览模式,操作localStorage会直接报错,需要try catch
  • 某同学用unescape解析encodeURIComponent编码的信息,掉进了乱码的坑。
  • type=search有坑。
  • position:fixed有坑。
  • 部分版本的padStart/padEnd实现有bug,会出现null
  • http://www.joycesong.com/arch…
    ios版本:11.1-11.3
    使用swiper或者transform属性时,有一定概率出现transform的元素以外的所有元素都消失,上下滑动一下页面又出现了。
    给外层元素加一个overflow:hidden属性即可解决。
  • 当使用-webkit-overflow-scrolling: touch;时,同时使用::-webkit-scrollbar伪类的display:none隐藏滚动条在iOS 11+出现失效的情况,需要使用如下方案解决,参考:https://stackoverflow.com/que…

Andriod

  • 针对部分浏览器非预期的缓存机制,需要服务端添加如下HTTP头信息:

  • 部分机型touchmove事件不连续触发

Android的事件每次都要经过浏览器内核再发往UI线程,为了提高效率,如果浏览器内核中没有设置preventDefault,Android就认为该页面元素不需要touchmove事件,于是下次的事件就不经过内核,直接发往UI线程,于是js中就捕获不到touchmove事件。

解决方案:在事件响应的地方设置preventDefault,这样就可以源源不绝地接收到touch事件,比如在touchstart事件中执行e.preventDefault(),touchmove事件就会连续触发。但是这种做法会取消掉浏览器其他的默认行为,比如页面默认的滚动。。。

  • 字号小于12px,或字号不是偶数,部分机型文字无法居中的问题

解决方案:使用transform: scale(0.5)进行缩放 or 字号大一点

  • scroll 相关方法兼容问题

CSSOM 视图模型新增了一些 scroll 相关的方法,参考:https://drafts.csswg.org/csso…

polyfill:https://github.com/iamdustan/…

综合问题

禁止页面滑动

当你需要禁止移动端页面滑动的时候,在iOS下,需要禁止页面中的touchmove事件,在安卓下,需要给html, body元素加上如下CSS:height:100%;overflow:hidden;

推荐使用以下代码进行处理:

但由于禁掉了touchmove事件,导致iOS下你希望滚动的部分也无法滚动了,因此对于希望滚动的部分,通过e.stopPropagation保留原有滚动效果,并针对回弹动画的交互,建议使用如下代码声明一个可滚动区域:

被屏蔽的 class

有些浏览器或者插件会通过DOM元素的class来识别是否为广告,并隐藏或者直接删除DOM。

  • mask
  • banner
  • fixed
  • sticky

点透

移动端的 click 触发顺序是touchstart->touchmove->touchend->mousedown->mousemove->mouseenter->click

在重叠的区域里,被遮盖的元素绑定click,遮盖的元素绑定touch事件,且touch后遮盖的元素会隐藏的话,就会造成穿透,因为click是在touch之后延迟触发的,浏览器会误认为是在遮盖的元素上触发了click。

解决方案:fastclick or point-event:none

参考链接

https://github.com/jtyjty9999…

转载请注明: 飞嗨_分享互联网 » 移动端的那些坑

赞 (0) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽

高效,专业,符合SEO

联系我们