先来讲讲问题的由来。 我们以前在pc上开发时，无论是开发web还是app，都有很完善的调试工具，这些高度工具甚至能渗透到硬件级的调试，如微软的NetworkMonitor能抓住经网卡的几乎任何数据，但在手机上就不一定喽。 这两天有些同事反映用手机上网时出现一些奇怪的问题，其中一些就是cmwap网络状态下总是提示： Your request for a service could not be fulfilled. Please try again or contact your operator if the problem persists 网上也有不少人说这是cmwap移动代理造成的，但造成的原因是什么google、百度都是浮云，按照日常调试的工作首先想到的是抓包，看看发送和响应的数据，只可惜手机上没有调试工具（至少目前为止我没发现），用pc连手机cmwap状态死活上不了网，至今是个未知数。用手机模拟器吧，这模拟器使不了cmwap网络状态。以上总总都失败后，只好上网提问求助了，至今未来任何回复，希望哪天有在移动工作或工作过的人出来回答一下。 cmwap问题是其中问题之一，其实还有其它一些手机不同于pc的问题，面对这些问题，我们应该如何解决呢？ 移动产品开发和pc产品开发很不一样的是产品最终运行环境和开发环境往往不是同一个，所以移动开发经常会在pc上用到模拟器，但开发web的时候总免不了要对一些接口进行监控吧，所以先来讲讲接口的一些监控方法。 引自监控Android模拟器的HTTP的一种方未能就是有fiddler，不过文章里提到的启动代理ip是10.0.2.*,这个在我电脑上没成功，我用的是127.0.0.1，不好使的同学多试几下吧，命令如下： emulator -avd android23_qvga -http-proxy 127.0.0.1：8888 android23_qvga是avd名，可以通过sdk中的AVD Manager里查看。 这种方法可以监控模拟器的数据收发。 另一种方式就是关于调试网页，做过前端开发的人都知道经常用到firebug，开发手机时也是先在pc 上开发成功后放在手机上，在手机上出现问题时经常用探针方式如alert、逐点试验排除。网上也有牛人做了weinre，不过得安装java环境。 岂今为止，我们还没有完全解决手机真实环境下的调试问题，看来要解决这个问题只能等到有手机端的调试工具出现了。
cmwap, fiddler, Weinre, 移动调试
HTML, 从HTML文档的开始到结束排列: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> <!–让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条 –> <meta name=”format-detection” content=”telephone=no”]]> <!–禁用手机号码链接(for iPhone) –> <link rel=”apple-touch-icon” href=”icon.png”/> <!–设置你网页的图标, 尺寸为57X57 px –> <!– iOS 2.0+: tell iOS not to apply any glare effects to the icon –> <link rel=”apple-touch-icon-precomposed” href=”icon.png”/> <!– iOS 4.2+ icons for different resolutions –> <link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” /> <link [...]
webkit, 移动
1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 (1)<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”viewport” /> (2)<meta content=”yes” name=”apple-mobile-web-app-capable” /> (3)<meta content=”black” name=”apple-mobile-web-app-status-bar-style” /> (4)<meta content=”telephone=no” name=”format-detection” /> 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；注：这个标签只有页面从主屏幕上启动时才有效，但里面的外部超链接会跳到默认浏览器，所以适合于完全由jqm之类框架控制的页面应用。 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；注：适用情况和apple-mobile-web-app-capable类似。 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码 2、如何去除Android平台中对邮箱地址的识别 iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中 <meta content=”email=no” name=”format-detection” /> 或者在相对应有邮件地址的地方加上这句 onclick=”javascript:void(0)” 3、如何去除iOS和Android中的输入URL的控件条 你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？ 答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果 setTimeout(scrollTo,0,0,0); 请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。 4、如何禁止用户旋转设备 有很多人有这个需求，但别想了，浏览器阻止不了。 5、如何检测用户是通过主屏启动你的webapp iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true， 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。 在Android中从来没有添加到主屏这回事 6、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。 7、在android、windows phone和ios平台上的浏览器基本上都支持直接发邮件和打电话功能，前提是设置了手机邮件地址和有sim卡。 主要语法如下： href=“tel:138xxxx”和href=“mailto:xxx@xxx” 这两个属性在html4就有了，只是在移动上会有更大的发挥。以下有示例。 <!DOCTYPE HTML> <html> <head> [...]
android, HTML, ios
页面上的iframe，任何涉及到这个iframe的reflow行为都会导至iframe重新加载。 点击我页面会刷新 我是容器 我是打酱油的 我是问题所在 function twjtest() { $(“#subtwj”).appendTo($(“#twj”)); $(“#subtwj”).show(); } 解决的方法有如下： 一、避免涉及iframe的reflow行为。 二、给iframe另上属性值src=”#”，前题是页面的href值不变。 注意每二种方法中#其实是一个变量，默认其指向本页面，来格来说是指向页面的标签，所以如果值不等于本页面地址的话，给iframe加上src=”#”也是无效的，因为iframe如果发现自身src值不等于本页面值也是会重新加载的；这种情况在jquery mobile使用过程中会有问题，因主jqm通过ajax加载页面后会改变的值，特别是页面有预加载data-prefetch操作时，很隐藏，让人很头疼。
iframe
浏览器跨域的方法有很多，可参考http://js8.in/752.html里面介绍过的各种javascript跨域方法，其中cors是一种比较新的w3c标准，有点类似现在flash中使用的cross-domain，通过授权的方式实现不同域（包括顶级域）之间资源跨域共享。详细的说明可以看看本文最后的“参考自”的文章，挺详细的。啥也不说了，直接上例子吧。 前端js代码： function testcors(){ var request = createCORSRequest(“post”, “http://bm.tita.com/test/api.php?ck=get”); if(request.setRequestHeader){ request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);//非IE浏览器没有这句不能实现post请求 } if(request.withCredentials != undefined){ request.withCredentials = “true”;//这里是为了在非IE浏览器上可以带cookie必设的参数 } if (request){ request.onload = function(res){ //do something with request.responseText alert(request.responseText); }; request.onerror = function(res){ //do something with request.responseText alert(request.responseText); }; request.send(“ck=post”); } } function createCORSRequest(method, url){ var xhr = new XMLHttpRequest(); if (“withCredentials” in xhr){ xhr.open(method, [...]
跨域
Unable to open sync connection！ 关闭usb调试，再重新打开。 Setting -> Appliactions -> Development -> USB debugging 或者是有些人用的（本人没试过） 在控制台上输入：adb kill-server，然后再输入adb devices命令就可以了
在网上看到的，发现很有意思就摘录下来了，有些结果确实很奇怪，学习一下可以深入理解javascript的特别之处，试着解释了一下，但有些还是解不通，还在探索中…。 函数 第一题 var i=5; function fo() { var i=4; var fi=new Function(“alert(i);”); fi(); } fo(); 结果：5 解释：Function在执行时会动态新建一个对象，并且这个对象是不遵守词法作用域的，它的作用域链是顶级作用域。 第二题 function f1() { i=20; eval(“var i”); } f1(); alert(i); function f1() { i=10; var i; } f1(); alert(i); 结果：第一个alert就i is not defined 解释：js会预解释时会采用第二个 f1，第二个f1预解释时i是个局部变量，所以会出现如上结果，如果把第二个f1去掉，则结果会是20，这是因为eval在执行时才会产生i局部变量，而这时i=20已经通过作用域被解释到全局环境中了。 第三题 function f1() { alert(“1″); } function f2() { alert(“2″); [...]
终于把我的机器升级到了android2.2，不过这过程中丢失了我不少的数据，因为之前安装了不少东西，而且刷过机器，最主要的是360里的黑名单没了，好惨烈的升级啊。 刚开始升级的是国行版的，升级完看看着不是那么顺眼，安装了好多不想要的不是那么好使的应用，后来又换成UK版了，不错，很多问题都解决了，比如照相问题。 不过国人用国行版有它的优势，首先就是中文的支持，这不，安装完UK版后首先出现了发中文短信的问题。 发中文短信时发现发出去的是空信息，而出信息则没问题，网上一搜发现不是个例，大部分的解决办法是安装个第三方应用如Handcent SMS，不过有个更牛哥们提供了更牛的方法，如下： 首先得先root机器，安装RE管理器，把/system/default.prop中的sms.convert.char.for.latam=1改成sms.convert.char.for.latam=0即解决了问题。 另一个问题就是关于cmwap和cmnet网的接入问题，这两个是用来收发彩信和移动上网用的，这个比较简单了，水货买回来的时候商家很多都设好了，自己刷机后得重新设置，网上有很多教程。 这期间碰到另一个问题，因为现在强制把所有的应用安装在了sd卡上，机器重启是免不了的，如果输入法安装在sd卡上，则设置的输入法会在机器重启后被重置为原来默认的，所以最好把这类应用安装在机器内存中就好了。 总的来说，froyo让机油们等了很久，只是等着等着忘了它一段时间，升级上改进了不少bug，但运行似乎不是那么顺畅了，没办法，谁让你是550M呢，将就着用吧，就个世界变化太快。
froyo
HTML5的预加载特性，在当前页面预先加载一个http请求到本地缓存，当页面访问到这个页面时会直接从缓存里取。 实现起来非常简单，只需要如下代码即可： <link rel=”prefetch” href=”http://www.baidu.com/“><–支持FF7–> <link rel=”prerender” href=”http://www.sogou.com/“><–支持chrome14–> 网上有资料说opera也支持，但我测试时没有发现，我用的IE9，safari5+，opera11都不支持。 注意问题： 这里说的预加载只是针对当前页面，即如果你从浏览器地址栏再请求预加载的内容，它还是会再加载的，这是合理的。 经过测试，在当前最新的浏览器一其实只有chrome支持得最好，ff虽然是预加载了，但并没有起来“预期”效果，再取时还是会再加载。 预加载不支持file本地协议，目前只则试了http协议的， https协议的没有测试。 测试时发现只支持单参预加载，不支持批量，即如果有多个请求需要预加载，浏览器只会处理第一个。 在firefox的头信息中会出现x-moz: prefetch的信息。 对于不支持的浏览，其实要实现也很容易，比如有些js框架jquerymobile就在各种新浏览器上实现了这一技术。
html5
很多网站都通过User-Agent来判断浏览器类型，如果是3G手机，显示手机页面内容，如 果是普通浏览器，显示普通网页内容。可以通过以下方式启动桌面浏览器达到桌面浏览器访问移动页面的目的。 谷歌Chrome浏览器。在Windows的【开始】–> 【运行】中输入以下命令，启动谷歌浏览器： 谷歌Android： chrome.exe –user-agent=”Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus On e Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safa ri/533.1″ 苹果iPhone： chrome.exe –user-agent=”Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; e n-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 S afari/531.21.10″ 诺基亚N97： chrome.exe –user-agent=”Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1 /20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 [...]
