让页面在手持设备中有良好表现(2) - Alex Kwong的日志

为移动设备进行测试
最佳的测试方法是在设备中进行,但是在实施中往往是不可行的.好在桌面版的Opera内建了测试的功能.Opera的Linux,Mac和Windows版本都可以在http://www.opera.com/download/下载.

桌面版的Opera和设备上的Opera是基于相同的代码,但在页面表现上仍然存在着一些差异.尤其表现在JavaScript的应用上,另外Opera的小屏模式是不同设备的一个理想化模式.

将Opera用作测试环境
在非小屏模式下测试
把你的Opera窗口调整至跟设备一样大.Opera允许设置成把窗口大小显示到标题栏上.你会看到两个数字在页面标题前面想1000:800这样,":"前面一个数字表示当前窗口的宽度,":"后一个数字表示窗口的高度.一般只能手机的窗口尺寸是320像素高,240像素宽,一般常规手机的窗口尺寸是128X128像素.(译者注:使用Web Developer的Rezie工具可以更加方便的实现这个功能)

创建一个页面
用Opera打开这个页面
在菜单中选中工具>首选项>浏览,勾选在"标题显示网页大小"
调整窗口为设备大小

你可以使用Ctrl+F8隐藏地址栏,使用Ctrl+F7隐藏滚动条

在小屏模式下测试

创建一个页面
在Opera中打开这个页面
在菜单中选择查看>小屏幕 (Shift+F11,在Mac中是Shift+Alt+F11)

使用"Handheld"样式表进行测试

创建一个页面,至少包含一张midea="handheld"的表
用Opera打开这个页面
在菜单中选择查看>小屏幕

禁用图像
Opera有三种图像模式,显示图像,无图像和缓存图像,在菜单的查看>图像中可以找到.

禁用JavaScript
Opera用户包括设备上的用户,通常是启用JavaScript的.但是仍然需要在禁用JavaScript的环境下测试,因为有的用户会因为JavaScript对于设备负担较大而禁用JavaScript,比如JavaScript菜单.桌面版和设备上的Opera在JavaScript支持的差异意味着在桌面测试平台为设备做这方面的测试并不是完全可靠,但是在禁用JavaScript的情况下能正常工作的话那么在设备上也是没有问题的.

禁用JavaScript按F12

在无鼠标模式下进行测试
设备没有鼠标,很多也没有指点设备.为了模拟这个效果,将鼠标翻过来,只用键盘在页面中游走和进行交互

校验页面
可以自动检测页面是否是根据Web标准编写的,W3C提供HTML和XML以及CSS的校验服务.其他组织也有网站提供给你测试.要是你不像拥有一个有错误的网页,校验结果会非常的有用,它会在用户抱怨之前指出重要的错误.

校验HTML
在Opera中单击右键,选择校验(Ctrl+Alt+V),你也可以直接前往

http://validator.w3.org/.

校验CSS
Opera目前还没有提供校验CSS的功能,你去这里校验http://jigsaw.w3.org/css-validator/.

校验可访问性
为了让页面可以被不同的设备所访问,需要校验他们的可访问性.Bobby就提供这样的服务http://bobby.watchfire.com/.还有这个http://www.w3.org/WAI/ER/tools/

校验JavaScript
不幸的是目前还没有什么地方提供JavaScript的校验服务,所以这个必须用老师的方法测试.在不同的浏览器中看看JavaScript是不是能够正常工作.同时也要在小屏模式和非小屏模式下进行测试.

让页面在手持设备中有良好表现(1):为移动设备书写文档