使用 Opera Mobile 模拟器进行响应式设计和开发

移动 Web 普及速度很快, 受限于工具和屏幕尺寸, Mobile Web 的前端调试显得异常困难, 开发们渴望一个好用的调试环境, 而 Opera Mobile 模拟器正是这么一个工具, 为了解决移动 Web 调试而诞生的工具.

这是一篇译文, 本文将会介绍 Opera Mobile 模拟器的作用, 来历, 特性及其使用方法, 还会提到一些有价值的用法和需要注意的地方.

Opera Mobile 模拟器概要

早在 2009 年, 我参与 Opera Mobile 10 开发的时候, Opera 的同事决定调整 Opera Mobile 编译机, 以便生成的程序不仅可以运行在普通的移动设备, 还可以运行在 Windows 和 Linux 上. 最初是为了保证质量和提供测试环境, 而且这些桌面程序也被证实对 Web 开发有用; 令桌面运行的 Opera Mobile 取代一个手机上的所有测试成为可能, 仅需 Alt+Tab 或者 Command + Tab 即可呼出 Opera Mobile 的调试窗口, 这是多么地令人激动!

所以, 我们决定打通所有平台, 添加了对 Mac 的支持, 并且将它公开成为开发者工具, 称为 Opera Mobile 模拟器. 做成相当小的尺寸, Opera Mobile 模拟器可以在 Opera 开发者网站或者Mac 应用市场免费下载, 而且安装起来相当简单. 模拟器的处理引擎和 UI 与手机上的 Opera Mobile 是一模一样的, 与此同时可以配合桌面上如配置面板, 键盘快捷键和命令行等操作进行额外的调试.

本文中, 我们来看看如何使用 Opera Mobile 模拟器来创建响应式设计, 另外我们还会讨论一些相关的奇特配置.

基本使用

打开模拟器, 你首先看到的是配置面板. 使用左侧的配置, 你可以开启不止一个具有某些设备特征的的 Opera Mobile 浏览器. 比如, 选择 “HTC Desire” 配置可以打开一个分辨率为 WVGA (480×800), 纵向放置和放大到 150% 的 Opera Mobile 浏览器, 跟 HTC Desire 真机上的显示无异. 如果你再选择一个配置, 将会产生另一个相匹配的独立存在的 Opera Mobile 模拟浏览器.

可以在地址栏输入 URL 来加载网页 (这他妈不是废话吗!), 也可以通过拖拽文件或者 URL 至浏览器窗口来实现. 内页导航也同样的简单: 点击事件匹配成轻巧, 你可以在触控板上使用两指手势触来放大和缩小页面 (译者没有 Mac, 求网友测试). 如果你的设备不支持多点触控板, 可以通过使用 Ctrl 配合鼠标滚轮, 或者点击浏览器中滚动页面时出现的悬浮按钮 + 和 - 来缩放页面. (译者补充: 很多移动版网页已经禁止用户放大缩小页面, 这种场合无论是触控板还是缩放按钮都不可用.)

你可能留意到 Opera Mobile 模拟浏览器是可以调整窗口尺寸的, 随之加载的网页布局也会相应改变. 这是理所当然的, 浏览器是一个全屏应用, 不同设备上的体验也不相同, 当你需要在各种分辨率中测试的控制视窗的 meta 标签或各种情况下加载的 CSS 时, 该功能非常方便. 事实上, 通过调整 Opera Mobile 模拟浏览器的尺寸来测试不同的布局, 比在桌面浏览器中做同样的事情感觉更加真实, 因为后者不会触发针对视窗的设置, 因为可能忽略掉一些与视窗相关的 bug.

这里值得一提的, 在 Opera Mobile 模拟器中的设备宽度不是电脑屏幕的宽度, 那是正在运行的 Opera Mobile 模拟浏览器宽度. 另外, 如果你只关心设备横放和纵放时的效果. 你可以通过 Alt+R 或者 Option+R 快捷操作, 或者点击状态栏右下方的 Rotate screen 按钮切换方向.

当然, 每一个人的工作方式都不一样, 我在这里是为了协助你提高工作效率, 而不是命令你. 显然的, 没有什么能比真机上的测试更加靠谱, 但因为在移动设备中你可以确切地感受到网站的表现, 如设备上性能有限的 CPU 等. 然而, 真机测试太繁琐了, 所以在我的项目进入内测版本之前不会使用真机测试, 当项目刚启动时, 我更倾向于快速的 (1) 开发, (2) Opera Mobile 模拟器测试, (3) 调试迭代.

高级启动选项

在配置面板的右侧, 你会看到很多配置选项.

在 “分辨率” 下拉列表中有一些常见的屏幕尺寸和方向拱你选择, 你也可以添加自定义的选项. “像数密度” 下拉列表是一些 PPI 值的列表: 在 HTC Desire 上, PPI 是 252, 那么开启的模拟浏览器是默认 150% 的窗口比例和 1.5 倍的设备像素比. 假设选择了另一个 PPI 值的, 285, 那么是 200% 的窗口比例和相当于 2 倍的设备像素比. (这段太专业了, 译者表示压力很大, 可能翻译的不准确, 希望指点和更正, 原文如下:)

for the HTC Desire, this is 252, which will result in a 150% default zoom and a devicePixelRatio of 1.5 when launched. Selecting a PPI of, for example, 285, on the other hand, will result in a zoom level of 200% and a corresponding devicePixelRatio of 2.

简而言之, “分辨率” 和 “像数密度” 可以组合出不一样的配置和模拟浏览器视窗的展示效果, 以及确定哪些 CSS 会被应用.

最后, “User Agent 字符串” 下拉列表中允许你选择在几种访问模式中选择模拟浏览器对应的外观和 UA:

Touch

选择该项将以针对触屏手机优化过的 UI 来加载 Opera Mobile, 并且浏览器 UA 是 Opera Mobi.

Keypad

选择该项将以针对非触屏手机优化过的 UI 来加载 Opera Mobile, 为方便开发者, 鼠标点击, 平移和缩放手势仍可以在这里使用. UA 也是 Opera Mobi.

Tablet

选择该项将以平板化的 UI 来加载 Opera Mobile. 对应的 UA 是 Opera Tablet.

MeeGo (因为新版本支持 MeeGo, 这是译者加上的.)

选择该项将以 MeeGo (诺基亚 N9 用的是这个) 的方式来加载 Opera Mobile, 而 UA 是 Opera Mobi.

带参数启动

在配置面板的最后一个选项是 “参数” 输入框, 这应该是这批配置选项中最强大的. 你可以在这里填入大量参数或者标记, 这些参数或标记将用于加载一个新的 Opera Mobile 模拟浏览器. 比如: 使用 -displaysize 320x480 -url www.opera.com 会加载一个窗口大小为 320×480 像素的 Opera Mobile, 并且打开页面 www.opera.com.

这些标记也可以在命令行中使用. 默认的情况下, Opera Mobile 模拟器可在下列目录中执行:

Mac

/Applications/Opera Mobile Emulator.app/Contents/Resources/Opera Mobile.app/Contents/MacOS/

Windows

C:\Program Files\Opera Mobile Emulator\

Linux

/usr/bin/

重复通过命令行做一遍我们刚才的例子操作如下:

Mac

./Opera\ Mobile -displaysize 320x480 -url www.opera.com

Windows

OperaMobileEmu.exe -displaysize 320x480 -url www.opera.com

Linux

operamobile -displaysize 320x480 -url www.opera.com

这里有 -displayzoom 和 -monitorppi 两个参数用来调试页面非常便利:

-displayzoom

你可以用这个参数来缩小 Opera Mobile 模拟浏览器在桌面上的尺寸, 在此同时可以保留其宽度值, 高度值和设备像素比等. 换句话说, 如果你试用一下三星 Galaxy Note 的配置, 会获得一个 800×1280 的浏览器, 那你可以通过 -displayzoom 50 将它等比缩放成 400×640 大小, 对一个 900 像素高的显示屏来说这样的效果更好, 例如一台 MacBook Air.

-monitorppi

(丫的, 又是 PPI, 译者不懂, 不翻译了, 读者自己看看下面的原文吧, 知道 PPI 能看懂的请帮忙翻译一下.)

This, on the other hand, allows you to set the PPI of your computer monitor (for example, -monitorppi 128 for a 13-inch MacBook Air) and launch an Opera Mobile instance with a zoom factor adjusted to match the physical dimensions of the profiled phone’s screen. This will give you a better idea of how big, say, the clickable areas really will be when the page loads on an actual device, but remember that the PPI you get on the screen won’t be representative of what you’ll see on the device.

注意 -displayzoom 和 -monitorppi 是互相排斥的，因此不能被一起使用.

如果要查看所有可用参数, 请点击配置面板的 “帮助” 按钮, 或者在命令行中执行 --help 查看.

浏览器中设置

记住一件事情, 在 Opera Mobile 模拟浏览器中就算都是使用 Android 配置, UA 也可以有所不同. 你可以在打开 Opera Mobile 模拟浏览器后再去修改 UA, 点击红色的大 “O” 并打开 “设置 > 高级 > 浏览器”, 你可以在 5 个选项中选择一个, 包括 “Android”. 如果你需要设置完整的 UA, 从地址栏打开 opera:config 并搜索 “Custom User-Agent”, 你可以将自定义的 UA 在此输入, 这里的配置将覆盖掉其他任何地方设置的 UA.

值得强调的其他设置选项有清除 cookie, 缓存和本地分享相关功能, 可以在 “设置 > 隐私” 镇南关找到. 另一个值得推荐的是禁止浏览器键盘的切换按钮, 可以在 “设置 > 高级 > Opera 键盘” 中找到.

连接到 Opera Dragonfly 进行深度调试

在任何 Web 项目中, 有一个原则是你绝对要看看浏览器内部究竟做了什么事情. 这就是为什么 Opera Mobile 模拟器要与 Opera 的内建 Web 调试工具, Opera Dragonfly 通信.

你可以容易地将这套调试环境搭建起来:

1. 下载 Opera, 并在桌面环境安装好.
2. 在桌面版 Opera 上打开一个页面, 右击页面的任何地方, 点击 “Inspect Element” 打开 Opera Dragonfly. (译者提醒: Ctrl+Shift+I 可快捷打开.)
3. 在 Opera Dragonfly 中, 点击右上方的 “Remote debug configuration” 按钮, 保持默认配置点击 “Apply”.
4. 然后, 打开 Opera Mobile 模拟器并加载一个模拟浏览器.
5. 在 Opera Mobile 模拟浏览器中打开 opera:debug, 保持默认配置点击 “连接”.
6. 现在已经连接成功, 你可以在 Opera Mobile 中加载任何想研究的页面. 在切换浏览器标签时请确保调试环境选择正确. (可在 Opera Dragonfly 右上方第四个按钮中选择.)

在 Opera Dragonfly 下的 “Network > Network log”, 你可以检查请求的资源文件是否正常被加载, 以及样式中是否引用了不必要的图片文件. 如果没有异常, 在 Opera Mobile 浏览器窗口打开页面的同时, 你应该可以在调试窗口看到朝下生成的瀑布图.

另外值得一提的功能是 “Network > Network” 的选项. 那里有一个选择框可以令所有缓存失效 (这是你在测试的时候想要的). 那里还有一个选项可以设置和重写掉全部的文件头信息, 当你依赖浏览器嗅探时使用这个选项非常方便 (小心!), 或者通过特定的头信息来优化网站内容时, 你不必打开多个浏览器就能测试各种变量的效果.

对于其他 Opera Dragonfly 的功能, 包括哪些关于 DOM, CSS 和 JavaScript 检测, 获取颜色和使用命令行的使用, 建议到 Opera Dragonfly 文档去查阅.

这是一篇总结! 我希望你会喜欢这篇介绍如何通过 Opera Mobile 模拟器优化网站设计的文章. 自己去试试吧, 让我们知道你的想法和你想看到的改进.

译者的话

前两天我写了一篇文章《如何让开发者兼容你的浏览器》是为了回应浏览器厂商呼吁开发者们支持他们各自的浏览器, 但没有考虑到开发者的难处. 我本来是站在开发者角度说句话, 但带来了很多不一样的声音, 甚至有人认为我这是跟浏览器标准对着干. 我恰恰是希望厂商们不要只挂嘴边, 也为开发这做些事情. 罢了, 谁干谁知道…

文章中我提到 Opera Mobile Emulator, 因为没深入了解, 刚开始的时候我不知道可以用来调试. 将 Debug 环境搭起来后感觉十分好用, 性能比 Android 虚拟机要好很多, 也不比 XCode 调试 iPhone 效果差. 于是我想在团队内分享一下这个工具, 也花了点时间翻译了这个文章.

文章翻译自 《Developing Responsive Designs With Opera Mobile Emulator》, 原文出自 Opera 的测试工程师 Andreas.

由于文章写于两个月前, 最新版 Opera Mobile 模拟器的少部分功能在文中没有提及, 但不影响使用. 另外, 因为我不了解 PPI, 文中相关的两段文字我肯定没翻译好, 希望大家帮忙完善一下.