在做 iOS 和 Android 的 HTML5 开发时，你都掉到过哪些坑里？-H5教程

又是怎么解决的？

回复内容：

说一下我遇到的吧：
1、最痛恨的是红米手机，ua返回iphone，需要结合platform判断，但是还不准确，导致需要ios和android区别对待的时候就坑了。
2、是fixed的问题。这个解决办法是尽量不要用，不过ios7及以下才会出现这个问题。某些情况下红米也会有这个问题。（最近刚刚遇到，已经被坑挂了）。
3、如果你想要使用css3的动画，那么一定要变着方式使用3d gpu加速的方式，不要试着left，height，width这样的元素进行变换了，android4.4以下版本卡死你。
4、ios全线点击会有300毫秒延迟，使用fastclick解决。这个插件最良心了。
5、web app像素眼设计会纠结你1px边框问题。解决办法有相应知乎大牛答过。
6、qq浏览，uc浏览以及ios的浏览器，滚动时不会触发scroll事件，但会触发touchmove。当停止滚动后会出发scroll。
7、滚动有iscroll插件，但是还是使用原生的比较好。
8、meta功能要用好，禁止缩放，缩放比例，屏蔽电话号码等功能很实用。（手机回答就不列举了）。
9、如果想要像手机淘宝那样的各个平台看起来展示效果一致，那么就使用rem来做单位。
10、-webkit-tap-highlight-color可以取消点击高亮。
11、localStorage在浏览器开启无痕模式下ios会抛异常，导致js中断。
12、一些情况下对非可点击元素监听click事件，ios下不会触发，css增加cursor:pointer就搞定了。当然想要干脆静止点击就是not-allowed。
13、android4.4以下版本，设置圆角属性需要在直接元素上，向父元素设置圆角并且指定overflow:hidden是不会生效的。
##########
以上，暂时就想到这么些，有些大家都清楚，还是混个条数写上来了。以后再有新发现随时补上来。
########## 我来说一个所遇到的诡异的坑。严格地讲不算是坑，但是比坑更坑100倍，因为你一旦遇到了，压根就没辙。

事情是这样的，公司有一个H5开发的游戏。开发、测试、运营一切正常。不久联运了，联运在合作方的平台上。谁想一上平台就不对了，具体的问题是完全找不出问题！在我们的服务器上一切工作正常，但是到合作方的服务上，在手机里怎么刷新就是不工作。由于生产版本是混淆并压缩的，所以在手机上调试及其痛苦。折腾了好几天一直还是黑屏。简直见了鬼了。老大做了好几年游戏，他说以前用主机托管的时代，开服都要给机器烧了香再送去机房。现在这个云服务器年代，没法给云服务器烧香开光啊，咋整？！

没法整，为了收入只能硬着头皮继续查。

终于一天，调试的小弟在safari 的远程console里面发现有一个js文件404了。但是这个js文件在CDN上存在的好好的，查了和刷了CDN节点，单独访问这个JS文件一切正常。 这个JS文件在我们自己的生产版本中也工作一起正常。就是在合作方的渠道里，用手机打开就404了。 把 404 具体错误信息 dump 下来，发给CDN供应商核对。CDN那里反馈挺快的，答：那个IP不是他们服务器！

见了鬼了！

把js文件改名，问题依旧，见了大鬼了。

又折腾了一天，实在没辙了。死马当活马医，把JS 嵌到页面里，工作正常了。 然后反查那个404的 ip，发现对应托管网站是广告联盟。 但是我们压根没在游戏里面查广告啊。
实在摸不着头脑，问了各路朋友。有一个做PC页游的老大哥一语道破天机：

他说：“谁叫你们运营域名的名字里带 game 的。 被电信劫持了。”

合作方的运营域名命中电信的劫持条件，我们的程序js文件被重定向到电信广告系统下的一个服务器上去。那个服务器在回吐这个js文件内容之前，会插一堆广告js代码到页面中。由于我们的游戏是用了一个 z-index:9999 的 canvas 绘制的。所以之前电信插入的广告被挡住了，谁也没发现。 直到那个广告服务坏掉的那天，页面就拉不出来了。

不要脸的电信！！！！

从此之后，我们所有的 js 文件全部改后缀名叫 css, 改 mimetype 叫 text/plain 来, 跟我念 : 千万不要用 jQuery Mobile ! 千万不要用 jQuery Mobile ! 千万不要用 jQuery Mobile ! iOS 弹出键盘时，viewport 高度并不会变，但是 Android 是变的。所以 iOS 上 fixed 在底部的元素显示不出来。 点击穿透 click延迟 scroll元素临界的bug android screen.w/h 不准 rem不准 scroll时动画失效 animate回调 最小字号限制 不同机型全屏自适应 android，ios和native通讯 下载app方案ios，android，微信都不一样 二维码识别 太多了手机根本写不完吃饭去了…

补个canvas残影 drawimage 发虚等不同系统机型也表现不一致。 说下遇到过的几个问题……

1.iPhone5以上各种应用的webview（例如微信）在遇到有大量图片的页面时会出现图片乱套的情况，6和6plus更为严重，具体表现为各种img和background-image互相错乱，困扰了我们好久，简直是大坑，目前研究出暂时的解决方法是动态给所有用到图片的元素加上

-webkit-transform : translate3d(0,0,0)

iOS（safari）有时候某个标签绑定点击事件无效，加了空的onclick=""就好了，如：<a onclick=""></a> 我来补充几点吧。

1. 图片大小最好是标注的2倍，这样可以保证在各类机型上的清晰
2. 小图片最好拼合起来做成雪碧图，然后可以在TinyPNG – Compress PNG images while preserving transparency网站上压缩后再Base64嵌入html或css中。移动端要尽可能减少请求。不过太大的图片就不要base64了，性能会下降。一般以10k为界
3. rem方案相当复杂，存在非常多的兼容问题，以至于阿里这边还专门有一个Flexible库来解决这一系列问题。但是兼容性问题解决后开发会变得非常畅快。
4. 图片比较多的页面务必要做懒加载（也就是滚动到图片的时候才加载）
5. border-radius不要随便乱用，在很多安卓机型上都会出现锯齿，非常丑
6. css动画请使用transform，而非直接控制width,height,margin，否则会造成大量的计算，性能堪忧。transfrom会把元素独立出来单独计算的。
7. 如果动画比较多或者面积比较大，想提高性能的话可以用transform3D，就算不设置3d变换也会促使浏览器开启硬件加速
8. flex布局挺好，但有点兼容性问题，需要同时写好几个带前缀的私有属性才能保证大多数机型的适配。推荐使用autoprefixer，不过要记得自己定制兼容浏览器列表，不然会有很多-ms-,-o-这类的属性，在移动端是没有用的

想到了再补充吧。 1、做点击跳转，长按删除功能的时候坑比较多：
（1）组合使用touchstart,touchmove,touchend,click事件；
（2）部分机型按到文字会弹出选择，复制的选项，使用 onselectstart="return false;" 禁掉；
-- 之后才知道有很多移动端事件处理库可以用,如 Hammer.JS - Hammer.js
2、1px边框问题，可以延伸到很多知识，如物理像素，CSS像素，viewport, rem等等
再谈mobile web retina 下 1px 边框解决方案
移动前端开发之viewport的深入理解
从网易与淘宝的font-size思考前端设计稿与工作流
3、Hybird开发模式下，页面跳转及返回，因为涉及到H5页面之间，H5与原生页面，需要判定从H5还是从原生跳过来，返回键的处理不同。
还有就是用户进入深层级的页面然后返回，有时候需要特殊处理。
目前还没有很好的解决方案，暂且采用url传参的形式进行区分，做相应的处理；
4、相对于底部绝对定位的按钮被键盘顶起来，用js定高

this.clientHeight = document.documentElement.clientHeight;
$('body').height(this.clientHeight);

刚碰到一个，iOS8 的 webview 加载网页，不支持使用 createElement 创建 video 元素播放 hls 视频流，然后动态指定 parent，会导致 app 崩溃。

并且，webview 视频内嵌播放模式下点击全屏按钮会导致 app 崩溃。

以上问题原因不明，经验证 iOS8 必现。