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”来关闭键盘默认首字母大写。