PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

在做 iOS 和 Android 的 HTML5 开发时,你都掉到过哪些坑里?

原创
2016-06-07 08:41:36 1314浏览

又是怎么解决的?

回复内容:

说一下我遇到的吧:
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=""就好了,如: 我来补充几点吧。
  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 必现。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。