在手持设备中，Opera Mini是一个相当不错的浏览器，今天给大家介绍的是Opera Mini 的仿真器。先看下用Opera Mini访问我blog的实际效果（需要JAVA支持），

官方提供的这个其实跟手机里的是完全一样的（可能会有字体支持的不同），你可以通过http://www.operamini.com/demo/?url=[URL] 预览任意网页，官方还提供了个bookmarks Show in Opera Mini，把它拉到收藏夹里，突然想看什么网站时就点一下（^__^可以用它来穿墙，就是屏幕太少了）。

做为开发测试用时，每次跑它网站是比较不靠谱的，这时我们可以使用本地的模拟器。

1. 下载个基于Applet的J2ME模拟器，比如MicroEmulator，Opera mini官方那个好像也是用他们的技术，
2. 下载一个真的Opera mini ，可以在http://www.operamini.com/download/pc/找到，选个新一点的手机，把jad跟jar都下下来。
3. 直接运行microemulator.jar，在菜单 file » Open JAD File … 选刚才下载的Opera mini的jad 其他的操作跟手机里是一样的。

还有个问题Opera Mini请求的页面是走Opera服务器转的，所以不能访问不在公网上的东西，不知道谁有办法处理一下。

当然，你还可以换模拟换skin，官方的skin在这里，这里还有一份有几个大size的， 当下来后通过菜单Options » Select Device… 换一下就可以。

• 动画流畅，视觉效果好
• 缓存能力强

那使用flash有什么问题呢？

• 需要Flash播放器
• 在M$的补丁打遍天下之前IE有那神奇的虚线框

基本上现在大家都用JS来输出Flash，估计用得比较多的是SWFObject（AW译的中文版），主要解决的问题是干掉虚线框与检查版本，甚至自动升级。但是，好像多数人只用它的so.write("xxx");，这样用有个缺点，不支持JS或者没开JS就全挂了。

不知道大家有没有注意到。swfobject的例子里面那个ID为flashcontent里面内容。如果在使用时把换成更有用的信息时（比如一个关键的链接），就可以解决noscript的问题，也解决了搜索引擎的问题。

电脑上的一般都没有noscript的问题，但是手持设备呢？不过现在手持设备也开始支持javascript，可是flash还没。。还好，swfobject可以检查版本，比如：

var version = deconcept.SWFObjectUtil.getPlayerVersion();
if (document.getElementById && version["major"] > n) {/*_*/}
else {/*_*/}

这样的话我们就可以处理好有js却没flash的情况。

如果M$的补丁打遍天下时，再也没有虚线框的烦恼的话。我们可以用更简单的方法。-__- 02年的方法，Flash satay

<object type="application/x-shockwave-flash" data="xx.swf" width="12" height="34">
<param name="movie" value="xx.swf" />
<a href="http://www.aoao.org.cn" title="^_^"><img src="xx.jpg"  width="12" height="34" alt="xx" /></a>
</object>

这种方式的的好处就是。没有flash支持时显示图片，没有图片时显示替换文字（alt），但少了个js，也少了版本检查的功能。当然还有其他问题，比如一帧的flash =.= 还据说一些屏幕阅读器会忽略swf内容（这是05年的人家说的）。

如果单从PC的角度，用JS的方式更优秀，但如果考虑手持设备。Flash satay更兼容。比如Opera mini就跑不起SWFObject。当然iPhone里的Safari是跑得起，可是它还是不支持flash。可能你会说：手持设备应该有专属的页面。没错，就算想在手机里跑flash，那也是Flash Lite。但是像使用Opera mini、Safari@iPhone这样的浏览器的话，考虑的就是能不能看到内容跟多少流量了，国内的GPRS还是比较贵的。

开发时要注意的几点就是：

• 指定页面的宽度及缩放，head里加上：

  <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

• 可以用window.scrollTo(0, 0);移到适合的位置。
• 没有hover，a的点击范围尽量大一点，不然很难点。两个a不要放得太近。^^或者直接在元素的onclick加跳转。
• label居然不能关联input.
• css支持并没有像乔布斯说的跟电脑上的Safari一样，不能直接用Safari代替调试。
• iPhone的头跟Google的Android的基本一样：

  Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3

iPhone版网站还可以跑在Google的Android，也许以后可以代替WAP。我也在练习中，http://iphone.aoao.org.cn，欢迎点击，一个光明正大的小偷网站，首页一直没时间做T_T。先看一下别人是怎样做滴。

• Google: http://yidong.google.com/m yidong？移动？ 真奇怪，在国内直接访问并没有看到新版，但域名却。。，挖哈哈。
• Facebook: http://iphone.facebook.com 很明显，由于面向的人群不一样，设计也就不一样。。
• Leaflets：http://app.getleaflets.com/ 一个搜索Search，Feeds，Flickr中转，del.icio.us中转及iphone版的网站列表的综合服务，^^
• Pocket Tweets：http://pockettweets.com/，Twitter的iphone版。挖哈哈，设计做得精美无比，功能呢，好像跟Twitter的差不多，除了设置
• Solomodels ：http://www.solomodels.com/iphone/ 其实，我是上去看MM滴，很明显，摄影师是男滴，模特是女滴~同门还有Shockfolio http://www.shockfolio.com/iphone/，两个站风格一样，不过MM不一样。^^
• beejive：http://iphone.beejive.com 可以上MSN，GoogleTalk，细节做得不错，看截图不知道有没有人去做可以上QQ滴。
• 插播广告(MT)Media Temple：http://ac.mediatemple.net/iphone 没帐号的可以到这里看一下界面截图，我的空间商，不过给的iphone版后台少了最重要的的地方－－看GPU。 (MT)很好~很强大~当机补了两个月的月租给我^^ 现在就天天盼着当机。
• 6间房：http://iphone.6.cn 应该是国内第一个iphone版的应用。^^ 可以看视频哦。 而且这里还推荐了一些iPhone版的网站
• ZCOM电子杂志：http://zcom.com/iphone/ 很明显，风格就是抄6间房滴，不过做的还不错。这里有ZCOM的iPhone的专页制作过程，好像少了重点。挖哈哈。

其实iPhone版的网站已经有一大堆了。可以到iPhone™ Application List有没有适合你的应用，不过好像多数设计得不怎样。

再其实，网站可以不用针对iPhone做开发，当然，有时间跟精力去做更好。别说我小气不贴图，看张图，然后打开http://www.apple.com/mac/跟下面的图片对比一下：

当然，细节部分还是要处理的。截图推荐使用Dock ^^ 注意上面的图右下角处，多帅。

Android Emulator是一款功能非常齐全的模拟器，电话本、通话等功能都可正常使用（当然你没办法真的从这里打电话）。甚至其内置的浏览器和Google Maps都可以联网。用户可以使用键盘输入，鼠标点击模拟器按键输入，甚至还可以使用鼠标点击、拖动屏幕进行操纵。

当然，我最关心的是浏览器。。用程序得到的是Mozilla/5.0 (Linux;U;Android 0.5;en-us) AppleWebKit/522+ (KHTML, like Gecko) Safari/419.3看一下效果，我的小站在里面的效果。。

它跟Opera Mini 有类似的缩放机制，不过Android的更优秀。。

测试了一下xsl，＝。＝不支持。看到xml+xslt拿到手上是没人理的。哎。坚持HTML。

其实Google一直在发展手持设备相关的。。。比如提供 比如提供移动页面生成 给弱功能的浏览器用。。还有本身一大堆产品推出移动版：

• 移动版搜索（XHTML），移动版搜索（WML），个性化主页也好像也有移动版的，我用手机访问过，不知道那个算不算是。
• GMail 移动版
• Google Docs & Spreadsheets 移动版，基本HTML模式
• Google Reader 移动版
• Google Notebook 移动版

好像还有一些移动产品，理论如果有的话直接在产品原地址后面加个m就行。^^

传说中中文挂掉了，哎！还是用Device Emulator去。。

扩展阅读：

• media=”handheld” 为手持设备添加样式
• CSS Mobile Profile 1.0

这次的更新主要是RSS阅读,图片共享,内容折叠,还有所说中的安全链接等,听到图片自然就想到flickr,这是我那个很烂的摄像头拍的.

测试一下上传…..我的手机晚上拍很烂..Opera Mini也好像没办法调要拍的效果..而且把照片的大小强定成480*640,

Web标准有一个优点:不必为多个终端写不同版本的页面.可是事实呢?
没错.我自己测试过..我的小站可以正常显示在我的手机里..可是..如果像163等之类网站呢?
不知道有多少人的手机可以撑得下去,再说GPRS的流量也不便宜.

像 http://m.flickr.com/ , http://m.gmail.com/ 这样的移动版本的发挥了很大的作用,手势设备用的人会越来越多,我们还是必须开发多版本的站,当然..这个多版本跟以前的多版本意义就大不一样了.

曾经,研究过手势设备,可惜没项目玩,~现在,有机会把想法变成实际的项目,又没时间了,
哎,下个星期起就要开始长达5个月的非常时期.-_-!!!!

扩展阅读

• www.w3.org/TR/WICDMobile
• www.w3.org/TR/css-mobile
• 为手持设备添加样式

最近听到greengnn 提到手持设备的CSS设计 才再次研究研究…….
不过这次发现一些问题…因为我这次的网页的布局是用了margin的负值来达到效果的..
所以..在模拟器里看有特别明显有问题..
同时发现明明写着 media=”screen” 可..他还是依然读到~

那天跟 Casper 聊时 他说wm5( Windows Mobile 5)里的IE把自己当成屏幕,所以都读.给我的建议是..先载入手持设备的样式后.再用JS判断屏幕大小…大于640都算PC设备,再改成屏幕用的
后来的手机测试我估计 wm5的IE是不认识media=”..”的..只有要就读…….因为我的朋友的手机测试中..一样可以读到 media=”screen” 的样式…

可惜我不喜欢这种方式…他做的是以手持设备为主..只要兼容PC就行…
我所需要的偶尔,也许,万分之一的机会用到.而且估计最多也只是我在公车上或者断网时无聊上上的.
最终决定在服务端得到http头信息来判断客户端是什么…

昨晚上忽悠了N 个朋友帮我测试，不过大家都是用手机,而且是都不是智能手机,直接访问网页时.我用PHP的$_SERVER['HTTP_USER_AGENT']得到的空的…去查IIS日志也看不到..一片空…记得两年前学wap时可以还可以得到手机型号跟手机号..听说好像现在移动不给手机发头信息~
我的w810用自带的浏览器在服务端得到的同样也是空的..不过用JS可以得到是爱可信的NF浏览器….不过用Opera Mini 测试时..得到的是

PHP $_SERVER['HTTP_USER_AGENT'] : Opera/8.01(J2EM/MIDP;Opera Mini/2.0.4509/1372;zh;U;ssr)
JS navigator.userAgent:Mozilla/4.0 (compatible;MSIE6.0;;Linux i686)Opera 7.50[en] 

看着发晕 我的手机有这样帅吗?可CSS支持怎那样烂呢.算了..只要服务端得不到的http头信息都当手机好了.同时改变目标…减少我手机的GPRS流量为第一目标…下载又不没作用的样式跟JS 会提高手机费用

程序改起来很简单..只是判断http头信息里有没有包含有Windows CE(Windows Mobile 的系统 ),Opera Mini,或者是为空的都定成手持设备,不给输出 screen 要用的样式跟脚本..当然,手持设备有那样多种..我只是整了我知道的..谁有完整一点的列表给我一份..嘿嘿..

其实直接把屏幕用的html给手持设备用是不是很好的做法…测试了一下gmail的移动版,,他是重定向到手机专用滴..可惜我太懒了..程序虽然很方便…多做套手持设备的模板..程序在底层判断一下给跳转就行.
也许.有天..我会做.这个是直接在原来的改下样式的.. 传说中的IE4支持还不错…有空再多测试下..

扩展阅读

• CSS Mobile Profile 1.0
• 在PC机上安装Windows Mobile设备的模拟器