mobile web HTML5 app曾经的踩过坑(转)
兼容性一直是前端工程师心中永远的痛.手机浏览器,因为基本是webkit(blink)内核当道,很多公司,不用考虑IE系的浏览器,所以感觉兼容性上的问题可能会少一些.
但是手机端,虽然出了很多工具,但是调试依然比PC端麻烦很多.而且很多坑是因为手机浏览器本身的bug,一旦出现,相应的解决方案很难根据以前的经验进行推测.只能寄希望于谷歌 + 猜.
这里记录一下我做手机端浏览器曾经踩过的坑.之所以用”曾经”,随着版本的更新,有些问题没了.
另外我(我司)没有足够的人力和物力对很多手机浏览器进行测试,我也只需要兼容iPhone 4s(老大有一个4s的玩物,不然可以从5开始!-!)以上系列和很新的安卓手机.这点和大公司没法比,群里有个百度的朋友,低版本的安卓和windows phone都要兼容…所以这篇文章当抛砖引玉了
(1)position:fixed
position:fixed
应该是反映最多的问题.但是手机屏幕很小,对于一些要重点突出的地方,还特别需要fixed在视口的某个位置,
我遇到的问题包括:
- 呼出系统输入法后,fixed元素位置乱飘.
- fixed的元素是后弹出的,点击发生击穿现象(会触发弹层下面元素的click)
- 涉及整页动画时,元素位置乱飘
- 如果祖先元素使用了
transform
相关的样式,fixed元素的不按照视口来定位.
解决的思路
- 用代码,触发一下滚动(document.body.scrollTop = xx),我用这个方法解决了iPhone某版本上,弹层击穿现象.如果测试的时候,出现fixed相关问题,都可以先试着
手动
滚动一下屏幕,看能否修复. - 用absolute元素替换.基本能解决问题,但是要多些一些代码,而且有明显的卡顿感.
- 改设计,比如
不用fixed(一般很难做到)
,简化一些动画
现在的情况
现在的情况是,新版的手机浏览器处理fixed元素的健壮性越来越好.呼出输入法虽然还有些bug,但是比以前出现的问题要好很多,一般可以接受.除了第四条,其他问题基本都还ok.
关于第四条,把fixed元素移出去就好.如果你再body上应用transform
,那么请容许我给你点根蜡烛.stackoverflow上有个相关的问题,大家可以看一下.
补充说明
有一个全屏遮罩的fixed写法,一直再用
.full-cover{
position:fixed;
top:0;left:0;right:0;bottom:0;
}
这个用过bootstrap的有心人应该都知道.但是还是遇到不少不知道的同学,在这啰嗦一下.
(2) 链接的打电话和发短信功能
通过设置a标签的href 为tel:电话号码
和sms:电话号码
,可以直接使用手机的打电话和发短信功能.但是这里有两个小坑.
1.安卓某些版本的webview上,tel:
会报找不到页面
- 解决方案传送门
2.发短信时,如果有预加内容,安卓和iPhone的schema时不同的,需要区别对待,主要?
和;
安卓: <a href="sms:123456789?body=sometext">点击发短信</a>
//ios7下sms的body处好像有问题,无法预制发送内容.
ios:<a href="sms:123456789;body=sometext">点击发短信</a>
注:短信功能,我并没有用在实际项目上,只是查找打电话功能的时候,碰巧搜到相关内容,然后简单的试了一下,内容主要来自stackoverflow.有不对之处,请指正
(3)touch
touch事件,之前我是自己管理的,因为一般的页面,需要去管理触摸得地方很少.不过总归要尝试一下别人的先进有法(直接使用别用的库)
1.首先一个巨无霸hammer.js
.这个我没用过,因为实在太屌,各种手势.看它的github的star数,好像也比较靠谱.不过我只是简单的考察了一下,没实际用过,就不多说了.
我考察的比较多得是,zepto
和appframework
的触摸插件,两者都添加的tap
系列和swipe
系列事件,代码实现也很相似zepto touch.js,af.toucheEvent.js
项目使用的时候,我被af的注释所迷惑
//Touch events are based from zepto/touch.js
//Many modifications and enhancements made
然后就用了appframework的touch插件.但是事实表明,zepto的touch.js要靠谱一些.
这里列举几个可能会出现问题的地方,算是af.touchEvent.js的采坑记录,如果以后出现类似的情况,大家可以参考一下解决方案.
1.安卓下swipe*
的方法很难触发
这是安卓的一个老问题了.谷歌一下 类似zepto android swipe
的关键字,就能发现不少.很多项目中的issue都能找到这个问题,连安卓自身项目里都有相关issue(链接要翻墙)
解决方法就是在touchstart
或touchmove
事件中,主动调用e.preventDefault()
如果使用zepto的库,有两种方案,
//1.在监听函数中调用e.preventDefault()
$('#ele_id').on('swipeLeft',function(e){
e.preventDefault();
//....
})
//2.修改库的源代码,再bind touchmove事件时,添加
.on('touchmove MSPointerMove pointermove', function(e){
if((_isPointerType = isPointerEventType(e, 'move')) &&
!isPrimaryTouch(e)) return
firstTouch = _isPointerType ? e : e.touches[0]
cancelLongTap()
touch.x2 = firstTouch.pageX
touch.y2 = firstTouch.pageY
deltaX += Math.abs(touch.x1 - touch.x2)
deltaY += Math.abs(touch.y1 - touch.y2)
//只有下面两行是要修改的代码,上面的代码帮大家定位
//这里当时安卓系统,且是明显的横向滑动时,调用preventDefault
if(isAndroid && deltaX > 10 && deltaX>deltaY){
e.preventDefault()
}
})
(注:`isAndroid`变量是用来表征是不是安卓手机
var isAndroid = false;
if (navigator.userAgent.match(/Android/i)){
isAndroid =true;
}
)//end of 注
对于安卓的swipeUp和swipeDown,就不建议去做任何干涉,因为会影响浏览器本身的滚动
2.以上下滑动为主的操作,有可能触发swipeLeft/Right事件,而不是swipeUp/Down事件.这个主要是因为native scroll的一些特性,导致算距离时竖向的距离可能会很小,而上下滑的最后,一般会有一个横向滑动的连带动作,导致deltaX>deltaY,从而判断出错.
zepto中,delta在touchmove中是累加的,所以基本没啥问题.
deltaX += Math.abs(touch.x1 - touch.x2)
af.touchEvents.js中,问题很严重.我是把取坐标时的pageX/pageY
改成了clientX/clientY
来解决这个问题的.供大家参考
补充说明
最后说一下,还是慎用左右滑动的设计,一是兼容性问题.二是,微信等app是手机网页主要的入口,而从左向右的滑动,很容易关闭页面.
(5)audio
看国外的资料,因为MP3
的版权问题,会让大家准备ogg等格式的文件.在天朝,版权问题吗(省略几个字)…所以直接上MP3.
<audio>
<source id="mp3source" src="yours.mp3" type="audio/mpeg">
</audio>
虽然很多资料上说,MP3格式的兼容性最好.但是这里还是有坑.当时运营同学给我一段音频,mp3格式,发现iPhone下放不了.查了很多资料,最后在一个论坛里找到,ios下MP3
要满足一定条件
Try changing the MP3 to 44100Hz, 128kbs
其他参数的我没试过,但是按上面要求转换出得MP3,都可以在iPhone上使用.
(6)localStorage/sessionStorage
PC端,这两个API在低版本的IE下是没有,所以是需要用try..catch
包裹的.
在移动端,我刚刚开始是不加的,所测试的手机也没问题.但是现在很多浏览器有无痕模式
,这个模式下,localStorage相关的API时禁用的.所以使用时,还是要保证代码的健壮性
(7)小贴士:
最后说些细节吧,后面可能会进行补充.也希望大家多提供素材
注意input的type: 比如希望输入手机号的input,应该用
type=tel
(希望输入纯数字的,个人觉得type=tel
也是最好的选择)监听input 的
oninput
事件来代替onchange
,这两个事件的含义,查一下就知道,不啰嗦了transform的时候,加上类似
translateZ(0px)
,有助于开启硬件加速.也看到有人说,现在不加z轴,也会开启硬件加速,这个我还没找到确切依据,不过加上不麻烦,我一般都是加上的.如果input或button的有怪异的默认样式,尝试
appearance:none;(-webkit-appearance:none;)
做透明的样式,
background:RGBA(x,x,x,x)
和ps对应的更好,opacity
我主要用于动画效果
mobile web HTML5 app曾经的踩过坑(转)的更多相关文章
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody
最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...
- 打造离线使用的Mobile Web App
最近公司举办技术大赛,我和同事一起制作了一个叫做10K Hours的Mobile Web App,可以帮助你通过一万小时的努力,成为某个领域的专家.正好前段时间翻译了一本书<HTML5 Mobi ...
- HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版
<HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站>以HTML与CSS为主,配合jQuery制作网页,并搭配jQueryMobile制作移动网页,通过具体的范例从基 ...
- 用jQuery Mobile做HTML5移动应用的三个优缺点
JQuery Mobile 和 HTML5 的 3个优点 1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobi ...
- HTML5+ App开发入门
HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实 ...
- Why mobile web apps are slow
http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/ I’ve had an unusual number of interest ...
随机推荐
- RxJava学习入门
RxJava是什么 一个词:异步. RxJava 在 GitHub 主页上的自我介绍是 "a library for composing asynchronous and event-bas ...
- EasyUi – 6.easyui常见问题
1.进度条 2.JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 3. 三张表的连接查询现在到datagrid里 4.日期组合框DateBox设置readonly ...
- SQLServer事务
指访问并可能更新数据库中各种数据项的一个程序执行单元(unit)由多个sql语句组成,必须作为一个整体执行这些sql语句作为一个整体一起向系统提交,要么都执行.要么都不执行 语法步骤:开始事务:BEG ...
- C++杂记
变量就是一个地址,同进程内可以直接访问,要做好线程之间的同步就是了.——摘自CSDN 2015-06-18 16:58:10(注:注意变量的生命周期(作用域就可以不在意))
- Eclipse中怎么设置Add cast to Clazz 快捷键
方法如下:window => preferences => 搜索keys => 然后点击进去,搜索add cast => 看到如图所示Quick Fix , 点击进去 => ...
- Tiny Rss Reader - 迷你RSS阅读器
发布新软件 TinyRss: Windows平台上的一个小巧的Rss阅读器. 用户界面: 项目地址: https://github.com/movsb/tinyrss.git 测试下载: http:/ ...
- 数据结构之图 Part3 – 1 遍历
DFS using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ...
- 验证备份前设置CONFIGURE CONTROLFILE AUTOBACKUP ON/OFF; 的区别
关于rman的,环境: oracle 10.2.0 rman nocatalog方式 1.首先设置 CONFIGURE CONTROLFILE AUTOBACKUP ON; 然后进行数据库全备份 RM ...
- Windows和Windows Phone应用终于可以使用FFmpeg了
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:曾经在Windows Phone上想开发一个支持多种格式的媒体播放器是比较困难的一件事 ...
- Android学习网站推荐(转)
收集了一些比较好的Android学习网站,希望对大家有所帮助: 1.http://developer.android.com/ Android官方网站,可惜被屏蔽了,需要使用FQ软件 2.http:/ ...