前言
今天浏览知乎问答时，无意间看到了一篇关于html5嵌入iOS和Android遇到各种坑的问题，故整理一下，发给大家。
- 微信自带的浏览器有点坑，同样的js在其他浏览器下没有问题，但在微信下面一定会出现样式错乱
- 跟你们讲，最纠结的是安卓程序员用苹果手机或者IOS开发用的安卓手机。。。你们体会一下如何评价用iPhone的安卓开发程序员？
- 居然没人说html5+video标签在android,ios下微信里的表现,这里面心酸故事多了去了...
- 最痛恨的是红米手机，ua返回iphone，需要结合platform判断，但是还不准确，导致需要ios和android区别对待的时候就坑了。
- 是fixed的问题。这个解决办法是尽量不要用，不过ios7及以下才会出现这个问题。某些情况下红米也会有这个问题。（最近刚刚遇到，已经被坑挂了）。3
、如果你想要使用css3的动画，那么一定要变着方式使用3d gpu加速的方式，不要试着left，height，width这样的元素进行变换了，android4.4以下版本卡死你。 - ios全线点击会有300毫秒延迟，使用fastclick解决。这个插件最良心了。
- web app像素眼设计会纠结你1px边框问题。解决办法有相应知乎大牛答过。
- qq浏览，uc浏览以及ios的浏览器，滚动时不会触发scroll事件，但会触发touchmove。当停止滚动后会出发scroll。
- 滚动有iscroll插件，但是还是使用原生的比较好。
- meta功能要用好，禁止缩放，缩放比例，屏蔽电话号码等功能很实用。（手机回答就不列举了）。
- 如果想要像手机淘宝那样的各个平台看起来展示效果一致，那么就使用rem来做单位。
- -webkit-tap-highlight-color可以取消点击高亮。
- localStorage在浏览器开启无痕模式下ios会抛异常，导致js中断。
- 一些情况下对非可点击元素监听click事件，ios下不会触发，css增加cursor:pointer就搞定了。当然想要干脆静止点击就是not-allowed。
- android4.4以下版本，设置圆角属性需要在直接元素上，向父元素设置圆角并且指定overflow:hidden是不会生效的。
- http://www.zhihu.com/question/31337935/answer/52025806?utm_source=weibo&utm_medium=weibo_share&utm_content=share_answer&utm_campaign=share_button 这个就是解决1px的问题
- 如果你用absolute元素绑定scroll事件去模拟fixed，每触发一次scroll就会发生一次计算，快速随意滚动的时候，如果浏览器没优化的话，就会感受到明显的卡顿，firefox有个平滑滚动的选项，开启后会流畅的多。如果你在滚动的时候加上阈值判断，又会出现反应慢甚至乱跑的现象
- 页面弹出层包含input，在触发键盘后，android如果页面有滚动条那么会滚动一个键盘高度的位置，键盘消失后不会回到原位置，想想如果反复触发键盘那就反复滚动网页，不要觉得是小事，测试不会这样认为的。
- 微信的坑了。在使用Backbone做的单页面应用中，history后退操作，页面不会回滚到历史记录的scrolltop位置。chrome和其它浏览器测试正常，只有微信不会回到原来位置，这是相当影响体验的，最后只能自己在路由里记录上一个view的滚动条位置和做相应判断和操作。
- 最后说一句微信也是流氓，会劫持网页的video标签，播放完视频的窗口上还给你推送一些下三俗的视频。
- 来, 跟我念 : 千万不要用 jQuery Mobile ! 千万不要用 jQuery Mobile ! 千万不要用 jQuery Mobile !
- 点击穿透 click延迟 scroll元素临界的bug android screen.w/h 不准 rem不准 scroll时动画失效 animate回调 最小字号限制 不同机型全屏自适应 android，ios和native通讯 下载app方案ios，android，微信都不一样 二维码识别 太多了手机根本写不完吃饭去了…补个canvas残影 drawimage 发虚等不同系统机型也表现不一致。
- Android调用重力传感器返回的数据和iOS和Windows Phone上的是相反的……
- 微信 Android 版在 HTML 代码里写 meta width=device-width 正常，JS 动态添加 meta 就要手动获取 320、640 这样的具体数值写进去才正常～
- 图片大小最好是标注的2倍，这样可以保证在各类机型上的清晰
- rem方案相当复杂，存在非常多的兼容问题，以至于阿里这边还专门有一个Flexible库来解决这一系列问题。但是兼容性问题解决后开发会变得非常畅快。
- 图片比较多的页面务必要做懒加载（也就是滚动到图片的时候才加载）
- border-radius不要随便乱用，在很多安卓机型上都会出现锯齿，非常丑
- css动画请使用transform，而非直接控制width,height,margin，否则会造成大量的计算，性能堪忧。transfrom会把元素独立出来单独计算的。
- 如果动画比较多或者面积比较大，想提高性能的话可以用transform3D，就算不设置3d变换也会促使浏览器开启硬件加速
- flex布局挺好，但有点兼容性问题，需要同时写好几个带前缀的私有属性才能保证大多数机型的适配。推荐使用autoprefixer，不过要记得自己定制兼容浏览器列表，不然会有很多-ms-,-o-这类的属性，在移动端是没有用的
- iOS 弹出键盘时，viewport 高度并不会变，但是 Android 是变的。所以 iOS 上 fixed 在底部的元素显示不出来。
- 做点击跳转，长按删除功能的时候坑比较多：
（1）组合使用touchstart,touchmove,touchend,click事件；
（2）部分机型按到文字会弹出选择，复制的选项，使用 onselectstart="return false;" 禁掉；
-- 之后才知道有很多移动端事件处理库可以用,如 Hammer.JS - Hammer.js - 1px边框问题，可以延伸到很多知识，如物理像素，CSS像素，viewport, rem等等
再谈mobile web retina 下 1px 边框解决方案
移动前端开发之viewport的深入理解
从网易与淘宝的font-size思考前端设计稿与工作流 - Hybird开发模式下，页面跳转及返回，因为涉及到H5页面之间，H5与原生页面，需要判定从H5还是从原生跳过来，返回键的处理不同。
还有就是用户进入深层级的页面然后返回，有时候需要特殊处理。
目前还没有很好的解决方案，暂且采用url传参的形式进行区分，做相应的处理； - 相对于底部绝对定位的按钮被键盘顶起来，用js定高
this.clientHeight = document.documentElement.clientHeight;
$('body').height(this.clientHeight);
- 一定要考虑文字过长的情况，要么溢出隐藏，要么换行不会影响布局。多使用一栏固定，另一栏（或多栏）自适应
- IOS下和安卓对json对象的遍历顺序相反
- 千万别在页面底部放一个position为fixed的输入框，iOS里会提不上来…
- iScroll 5 官方示例 拖到本地开发环境就完全动不了，无论 Chrome 移动设备模拟器 还是 微信内置浏览器 —— 弃之不用，手写下拉刷新……
- ECharts 的雷达图在 iOS WebView 中拖拽 容易使整个 ViewPort 高宽突破 meta 标签的限制
- Animate.css 中动作幅度较大的动画在用 腾讯 X5 内核的 App 中卡顿明显（鹅厂号称的基于 Chrome 完整内核优化 哪儿去了？MIUI 原生浏览器 都超流畅）
- WebKit 533-（微信、UC v9.8 开发者版）在遍历 带伪元素规则的 CSSStyleRule 对象时，会直接让浏览器崩溃（下断点走单步时基本没事，一释放断点立马崩溃，所以怀疑是栈溢出）—— 检测到老内核 直接跳过那段代码……（对老浏览器砍功能）
- a 标签 href 仅指向一个不存在的 hash，点击回调中根据 hash 内容调用相应功能，并阻止默认行为 —— Android、iOS 上各种 WebKit 浏览器 都会清空历史记录（执行了 a 标签的默认行为），导致单页应用无法回退……（桌面端浏览器 均无此问题）
- 微信 iOS 版 整页切换到 动态生成的表单，其提交按钮会自动点击，导致空白表单提交 —— 自己给 iOS WebKit 补上砍掉的 HTML 5 表单元素验证方法，提交前先验证 HTML 代码中的 required、pattern 属性，否则阻止提交事件
- 刚好碰到一个，fixed页脚定位，点击输入框弹出输入法，这时候下滑动会把页脚拉上来
- 刚碰到一个，iOS8 的 webview 加载网页，不支持使用 createElement 创建 video 元素播放 hls 视频流，然后动态指定 parent，会导致 app 崩溃。并且，webview 视频内嵌播放模式下点击全屏按钮会导致 app 崩溃。以上问题原因不明，经验证 iOS8 必现。
未完待续......
网友评论