webapp开发过程bug与技巧汇总
1. backbone处理cgi返回的jsonp格式数据
无线应用频道二期的cgi返回的格式是jsonp,但默认情况下,backbone认为ajax请求返回的数据类型是json。
解决办法:Backbone.sync 是 Backbone 每次向服务器读取或保存模型时都要调用执行的函数。 默认情况下,它使用(jQuery/Zepto).ajax 方法发送 RESTful json 请求。 如果想采用不同的持久化方案,比如 WebSockets, XML, 或 Local Storage,我们可以重载在model/collection中重载sync()方法。
2. iPhone Safari下在ajax回调函数里执行window.open新开窗口会被阻止掉
网上解决办法:ajax请求之前就先打开一个空白窗口,请求成功后,更新窗口的href。
但这种方式体验不好:
刚进入新开的窗口时,url为空,接着根据页面加载资源的情况,会有不同程度的白屏时间,而且url为空,让用户没有任何感知。
改进办法:响应事件时,先新开窗口,然后在新开的窗口中执行ajax请求,最后在ajax请求的回调函数里执行window.location.replace( )。
3. Window.open在手机uc和qq浏览器下失效。这个确实无能为力。
4. iphone搜索时,软键盘return如何显示“search/搜索”?
解决:把<input type=”search”/>包含在form里,safari的return(换行)才会显示search/搜索。
5. UC极速模式,访问webapp时,css和js都没有请求
原因:UC极速模式下的userAgent不包含Android和Iphone
解决:参考UC浏览器User-Agent 和 X-UCBrowser-UA使用说明书最新文档:http://www.uc.cn/download/UCBrowser_User_Agent.pdf
最保险的方法是向UC浏览器申请白名单。
6. 关于页面表现
(1)使用<a>标签,扩大触摸区域
(2)Chrome 12px字号限制:Chrome浏览器下所有小于12px字体大小的文字,默认都设置为12px。用–webkit-text-size-adjust :none;可解决。
(3)手持设备点击元素时会有一个难看的点击阴影(在andriod上尤其难看),这个阴影可以通过设置-webkit-tap-highlight 来去掉:-webkit-tapd-hignlight-color : rgba(0,0,0,0)。
(4)禁止用户在新窗口打开页面,我们可以使用a标签的target=”_self“来指定用户在新窗口打开,或者target属性保持空,但是你会发现iOS的用户在这个链接的上方长按3秒钟后,iOS会弹出一个列表按钮,用户通过这些按钮仍然可以在新窗口打开页面,这样的话,开发者指定的 target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮,这样用户就无法保存\复制你的图片了。
(5)关闭iOS中键盘自动大写
iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能需要关闭这个功能,移动版本webkit为 input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
posted on 2013-04-27 13:14 cccccccccccc 阅读(926) 评论(0) 编辑 收藏 举报