移动端开发小结

发表于

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

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

Android

  1. Android个版本对flex的支持不一，有些必须要加-webkit-前缀，有些则是支持display:flex-box;慎用。

  2. 点击某个元素产生阴影，需添加-webkit-tap-highlight-color: transparent;样式。

其他

  • 关于video标签的问题：使用伪类可以隐藏全屏按钮:
1
2
3
video::-webkit-media-controls-fullscreen-button {
    display:none !important;
}
  • 在需要实时统计用户已输入的字数时，使用简单的keyup事件无法完全监听用户输入值的变化（例如用户在输入拼音以打出汉字时），需要绑定input change事件至input元素，依赖于zepto或jQuery。
1
2
3
$(input).on('input change', function() {
  // sth
});