移动开发常见的坑

表单

通用

  1. <input> 的 placeholder在手机上位置偏上:line-height:normal;
  2. <input type="number">maxlength 无效、只能提交整数:用 JS 模拟
  3. <input type="number"> 删除上下箭头:input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0;}
  4. <input type="date"> 的placeholder` 失效:使用 JS 模拟
  5. 删除 <input type="search"> 的叉:input::-webkit-search-cancel-button { display: none; }
  6. <select> 设置 text-align: right 无效:direction: rtl;
  7. 避免输入中文过程中触发 input 事件:忽略在 compositionstartcompositionend 事件之间的 input 事件
  8. <input type="file"> 选择相册:<input type="file" accept="image/*">
  9. <input type="file"> 在 Mac 打开太慢:删除 accept 属性

IOS

  1. <input><button><select> 设置样式无效:-webkit-appearance: none;
  2. keyupkeydownkeypress 有时不触发,读取中文时变成拼音:用 input
  3. 键盘输入默认首字母大写:<input type="text" autocapitalize="off" />
  4. 用中文输入法输入英文可能出现一个六分之一空格:.replace(/\u2006/g, '')

安卓

  1. <input type="number"> 可能有样式问题:-moz-appearance:textfield;
  2. <input type="password"> 可能出现怪异悬浮框:<input type="text" style="-webkit-text-security: disc;">

IE

  1. 删除 <input> 的叉:input:-ms-clear { display:none; }

媒体

通用

  1. <audio>autoplay 失效:document.addEventListener("touchstart", () => audio.play());
  2. <video> 设置 z-index 失效:不用 z-index

安卓

  1. <video> 脱离文档:不使用 transform,改用 margintop
  2. 多个 <audio> 无法同时播放:改为一个

样式

通用

  1. body { height: 100% } 包含地址栏高度:document.documentElement.style.height = window.innerHeight + 'px'
  2. CSS % 可能有兼容问题:不用 %
  3. Retina 屏的 border: 1px 实际显示为 2px:使用 rem
  4. Chrome 无法显示小字:transform: scale(0.5, 0.5)
  5. :active 失效:<body ontouchstart=""> 或 JS 模拟
  6. transition 可能闪屏:-webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;
  7. CSS 动画闪白、卡顿:transform: translate3d(0, 0, 0);
  8. transform: skew+rotate 出现锯齿:transform: rotate(-4deg) skew(10deg) translateZ(0); outline: 1px solid rgba(255,255,255,0)
  9. ::after 无法使用 animation:不用 ::after
  10. display: flex 可能无效:慎用
  11. background:linear-gradient 出现 90 度偏差:针对 -webkit-linear-gradient 单独设置
  12. position: fixed 元素抖动:transform: translate3d(0, 0, 0);
  13. position: fixed 弹窗滑动穿透:阻止 scrolltouchmove 事件
  14. position: fixed 弹窗里的输入框打开键盘光标不对齐或滚动错位:获取焦点后改 absolulte,失去焦点改回来或 JS 模拟
  15. position: fixed 底部条错位:body { position:fixed }
  16. 边框溢出屏幕:width: 100%; -webkit-box-sizing: border-box;

IOS

  1. <div style="position: absolulte"> 导致页面横向滚动条:`

安卓

  1. 图片可能会模糊:使用两倍图+background-size:contain
  2. 圆角可能失效:background-clip: padding-box;

IE

  1. IE 10 不识别 viewport@-ms-viewport{width:auto!important}
  2. IE 10 设置 viewport 导致滚动条消失:-ms-overflow-style: scrollbar

交互

通用

  1. 模拟平滑滚动条:overflow: auto; overflow-scrolling: touch;
  2. 禁止复制、选中文本:user-select: none;
  3. 按下可点击元素出现灰色阴影:-webkit-tap-highlight-color: rgba(255,255,255,0)
  4. 点击事件 300ms 延时:touch-action: manipulation;
  5. 点击穿透(点击时隐藏):使用动画或延时
  6. touchmove 阻止冒泡导致 touchend 不触发:不要阻止冒泡

IOS

  1. 有些元素的 onclick 不触发:cursor: pointer;
  2. 返回页面时不触发 onload:window.onunload = function () {};
  3. 点击 WebView 内的链接导致新开浏览器:target="_blank"
  4. 禁止复制或保存图片:-webkit-touch-callout: none;
  5. 获取页面滚动条位置:使用 window.scrollXwindow.scrollY

功能

通用

  1. 图片可能加载很慢:使用 canvas
  2. 禁用缓存:<meta http-equiv="Cache-Control" content="no-cache" />
  3. 长时间按住页面可能出现闪退:-webkit-touch-callout: none;
  4. Dom ready 时无法获取页面高度:采用轮询
  5. flexbox 子元素 setTimeout 不渲染:不用 flexbox
  6. 全屏时手机顶部状态栏颜色:<meta name="apple-mobile-web-app-status-bar-style" content="blank-translucent" />
  7. Chrome 无法解析 new Date("2017-1-1") 这样的日期格式:改用 / 分隔符

IOS

  1. 保存到主屏幕图标有光泽效果:<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
  2. 从主屏幕启动时白屏:<link rel="apple-touch-startup-image" href="start.png"/>
  3. 旋转屏幕后字体大小改变:-webkit-text-size-adjust: 100%;
  4. 拍照获取的图片可能被旋转:允许用户手动旋转

安卓

  1. 非 WIFI 模式 WebSocket 不存在:判断改为 Ajax 轮询
  2. 避免文字被识别为电话号码:<meta name="format-detection" content="telephone=no">
  3. 避免文字被识别为邮箱:<meta name="format-detection" content="email=no">

微信

  1. target="_blank" 不会打开新窗口:不用
  2. 需要绑定(收费)和关注认证公众号才能分享
  3. 无法动态更新分享的标题:同时设置 document.titleonMenuShareTimeline
  4. 小米微信崩溃:不要在事件函数中解绑事件
  5. focustouchclick 事件可能不触发:-webkit-transform: translate3d(0,0,0)
  6. 微信分享缩略图不显示:使用小图片(300*300)、慎用 base64、使用完整绝对路径(确保域名和公众号JS安全域名一致,路径不能有 – 等特殊字符,首选 .jpg 格式,试试http 协议)、<img> 放在 <body> 开头位置且 <img> 不能 display:none(可以给容器 display:none
  7. 微信的页面会报 WeixinJSBridge is not defined:忽略
  8. 安卓微信分享的地址错误:慎用 location.href,改为写死
打赏
微信扫一扫支付
这篇文章对你有用?
微信logo 微信扫一扫,打赏 1 元表示支持吧~

发表评论

电子邮件地址不会被公开。