发表于

最近在做一些活动页面相关的移动端开发时，遇到的一些坑与解决方案记录如下。

IOS

  1. 首先是IOS的 position: fixed; 的BUG，并且表现为几个现象，首先是当点击页面中某个 input 弹起系统键盘时，fixed在底部的按钮（比如提交按钮）会离开原位弹至上方。若想让其固定在底部，目前项目的解决办法是监听input（textarea、select）的focus事件，当触发focus时，给body添加一个class，使body的position:relative;并对该底部按钮应用样式：position: absolute;使其固定在底部,当触发blur时取消这些样式恢复原状。Reference: IOS position

  2. 一个元素过长需要 overflow：scroll 进行滚动时，ios中需要在此元素应用样式：-webkit-overflow-scrolling: touch；可以使其滚动时与页面滚动表现一致。

  3. IOS会自动将数字识别为电话号码，禁止此行为需在head中加入tag：<meta name="format-detection" content="telephone=no">

  4. 300ms click延迟与点击穿透，可使用faskclick库，但会产生某些bug，例如点击input或者select无法调起键盘。需要在被点击的input添加needsclick类名。Reference: fastclick

阅读全文 »