Opera模拟器帮助优化您的设计。

这是我们第七条中介绍了一系列有用的和免费的工具和技术，开发和发布的Web设计界的活跃会员。第一篇文章涉及PrefixFree第二次推出的基金会，一个负责任的框架;提出Sisyphus.js第三，库类似Gmail的客户端草稿。第四共享一个免费的插件我们称为GuideGuide，后来我们已经宣布了Erskine的响应的网格生成Gridpak和雷米夏普的调试工具JS斌。

早在2009年，当编码版本的Opera Mobile 10，我歌剧院的同事决定调整的Opera Mobile版本的机器，使生产出不仅对普通的移动平台为基础，但Windows和Linux。原本用于质量保证和测试，也证明了这些桌面版本是有用的Web开发，能够在台式机上使用的Opera Mobile带走了需要做的所有测试的手机上，手机浏览器窗口突然ALT /命令+ Tab键从我们的文本编辑器-精彩！

所以，我们决定，以消除皱纹的位，增加了MAC构建通道，并把它变成一个公开可用的开发工具，称为Opera Mobile的仿真器。在一个相当小的尺寸时，Opera Mobile模拟器可以从Opera的开发者网站，或从Mac App Store的免费下载，并安装它是简单的。引擎和用户界面是完全一样的，当您在手机上运行的Opera Mobile，而桌面特定的钩子，如配置文件选择器，键盘快捷键和命令行标志，给你一点点额外的调试功能。

在这篇文章中，我们将看看如何使用Opera Mobile的仿真器来创建响应的设计，我们将讨论一些更奇特的设置。

披露：我工作的Opera软件公司的Opera Mobile模拟器是产品经理，除其他事项。

（非凡的边注：你已经买了全新的非凡的书＃3本书介绍了新的实用技术和进步的网页设计了一个全新的思维方式。今天你的书！）

基本用法

启动模拟器时，迎接你的配置文件选择。使用配置文件的左侧，你可以启动一个或多个Opera移动设备特定的设置实例。例如，选择“HTC渴望”个人资料将推出的Opera Mobile在WVGA（480×800像素）的150％缩放级别肖像模式，就像它在实际的HTC Desire手机。如果您选择不同的配置文件，设置一个单独的Opera Mobile的实例将推出与该配置文件相匹配。

可以加载输入的URL中的地址的酒吧（obviously!），否则拖放到浏览器窗口中的任何文件或URL的页面。页面导航同样也很简单：点击匹配水龙头，你可以使用两指手势触控板来放大和缩小页面。如果是后者无法正常工作，你可以在你的机器上使用您的鼠标滚轮，或通过点击“+”和“ - ”出现在浏览器窗口的覆盖，当你平移放大。

你会发现来自四面八方，催生Opera Mobile的情况下，可以调整大小和加载网站的布局将相应改变。这是，当然，不同的设备上的浏览器是一个全屏幕的应用程序的经验，但是当你想测试你的视口的 meta标签或媒体查询设置工作在不同的屏幕尺寸，它是非常方便的。事实上，调整的Opera Mobile的实例来测试不同的布局会给你一个更真实的感受，不是做同样的桌面浏览器的视口的行为，因为后者不会响应不同的视口设置，所以可能会视口相关的错误被忽视。

值得一提的在Opera Mobile模拟器的设备宽度媒体查询查询在电脑屏幕的宽度，而宽度推出的Opera Mobile的实例。另外，如果你只是有兴趣在检查之间的差异纵向和横向的，你可以使用Alt / Option键+ R组合键，或点击“旋转屏幕”按钮在右下角。

当然，每个人的工作流程是不同的，我在这里，以帮助你更有效的，没有规定。显然，没有什么比在实际设备上测试，因为你会得到一个准确的概念的手感，您的网站在移动的环境中，在设备上有限的CPU等。然而，实际的设备测试是挑剔的，所以我宁愿离开它，直到我的项目已达到至少阿尔法质量，宁愿一个快速（1）发展，（2）使用Opera Mobile模拟器测试，同时也得到了项目（3）调试迭代掉在地上。

高级启动选项

在右侧的配置文件选择器，你会发现一些配置文件选项。

“解决方案”下拉菜单让你选择了一些常见的屏幕尺寸和方向之间，的选项添加您自己的。“像素密度”的下拉菜单列表中的PPI值的HTC Desire，这是252，这将导致150％的默认的变焦和devicePixelRatio 1.5启动时。选择的PPI，例如，285上，另一方面，将导致200％在一个缩放级别和相应的devicePixelRatio 2。

总之，这样的组合会有所不同的分辨率和像素密度值，每个配置文件和影响如何在视口中的行为，以及确定哪些媒体查询应用。

最后，“输入法”下拉菜单，允许你选择三种输入模式之间某些UI和UA的变化都与：

• “触摸” 
  ，此选项将启动Opera Mobile的触摸屏手机上使用的UI进行了优化，并给它一个UA字符串歌剧院摩比。
• “键盘”，
  此选项将推出的Opera Mobile与非触摸屏手机优化的用户界面和快捷键-开发者的方便，鼠标点击，平移和缩放手势仍然可以工作，虽然。UA字符串将包含歌剧摩比。
• “平板电脑” 
  ，此选项将推出的Opera Mobile与平板优化的UI。在这种情况下，的UA字符串将包含歌剧院平板电脑。

带参数启动

在配置文件中选择最后一个选项的参数字段，这可以说是最强大的一个的一群。在里面，你可以输入一些参数或标志，这将被用来启动一个新的Opera Mobile的实例。例如，显示尺寸320×480网址www.opera.com将推出的Opera Mobile与窗口尺寸为320×480像素，并加载www.opera.com。

这些标志也可以在命令行。默认情况下，在Opera Mobile模拟器可执行文件从以下位置：

• MAC 
  /应用/ Opera Mobile的Emulator.app /目录/资源/歌剧Mobile.app的/目录/马乔什/
• Windows的
  C：\ Program Files文件\的Opera Mobile模拟器\
• Linux的
  / usr / bin中/

重复我们的最后一个例子如下所示：

• 苹果
  /歌剧\ Mobile的显示尺寸320×480网址www.opera.com
• Windows的
  OperaMobileEmu.exe显示尺寸320×480网址www.opera.com
• Linux的
  operamobile显示尺寸320×480网址www.opera.com

两个参数来测试响应的设计非常方便，当是displayzoom和monitorppi：

• displayzoom
  这是有用的，如果你想Opera Mobile的实例的大小，以减少占用您的桌面上，同时保留其报告的宽度和高度值，devicePixelRatio和等。换句话说，如果你想尝试一下“三星GALAXY NOTE”的个人主页上，这将导致在浏览器的尺寸为800×1280像素，那么你就可以添加-一- displayzoom 50标志启动它的四分之一尺寸的表面400×640像素-高900像素的屏幕，例如，一台MacBook Air的一个更好的匹配。
• - monitorppi
  ，另一方面，允许您设置您的计算机显示器（例如，monitorppi 128的13英寸的MacBook Air）的生产者价格指数和推出的Opera Mobile的实例与调整，以匹配的物理尺寸缩放因子的异形手机的屏幕。这会给你一个更好的主意有多大，也就是说，可点击的区域真的会在实际设备上加载页面时，但请记住，你将在屏幕上的PPI将不能代表你会看到设备。

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

可能的参数的完整列表，请单击“帮助”中的配置文件选择，或在命令行中运行模拟器-帮助参数。

在浏览器中设置

有一件事要记住的是，即使推出了Android配置文件的Opera Mobile的实例，UA可能会有所不同。您可以更改UA字符串推出的Opera Mobile后，通过点击红色的“O” 设置→高级→用户代理，在那里你可以选择五个选项，包括“机器人”如果你需要设置一个完全自定义UA字符串，歌剧：配置的URL字段中搜索“自定义的User-Agent。”在这个领域，你可以设置一个自定义的UA字符串，这将覆盖任何其他UA字符串。

值得强调的是设置清除的cookies，缓存和共享位置，发现在设置→隐私，并切换到关闭屏幕上的键盘，发现下设置→高级→歌剧院键盘的选项。

连接到先进的Opera蜻蜓调试

在任何Web项目中，有一个点时，你绝对需要看看引擎盖下的浏览器中看到什么是怎么回事。这就是为什么Opera Mobile的仿真器可以与Opera的Opera蜻蜓，内置的Web调试。

您可以轻松地设置如下：

1. 下载，安装和运行Opera的桌面。
2. 将一个网页在Opera的桌面，用鼠标右键单击任何地方，并点击“检查元素”的启动Opera蜻蜓。
3. 在Opera Dragonfly，单击“远程调试配置”按钮（在右上角的第三个按钮），然后单击“应用”（默认设置就可以了）
4. 然后，打开Opera Mobile的仿真器和启动Opera Mobile的实例。
5. 歌剧：在Opera Mobile的调试，然后单击“连接”（默认设置就可以了）
6. 您现在已连接，并且可以加载任何你想要的网页在Opera Mobile调查。修改标签的时候，一定要选择正确的调试环境（在右上角的第四个按钮）在Opera Dragonfly。

，例如，在Opera蜻蜓的网络→网络日志，你可以检查媒体查询是否被正确写入，以及是否在样式表中引用的图像文件没有不必要的下载与小屏幕尺寸的设备。如果做得正确，你应该只看到他们朝下方的瀑布图时弹出扩展的Opera Mobile浏览器窗口的尺寸。

另外值得一提的是根据网络→网络选项的功能。有一个复选框来禁用所有缓存（你可能想要做测试时，），有一个选项来设置全局头覆盖-这是特别方便，当你依赖于浏览器嗅探（careful!），或特定的报头，以优化您的的内容，你想不开放不同的浏览器来测试不同的标题变化。

对于其他的Opera蜻蜓的功能，包括那些相关的检查DOM，CSS和脚本分析，挑选颜色，并使用命令行的概述，我建议看在Opera蜻蜓文档。

所以，这是一次总结！我希望你喜欢这篇介绍的Opera Mobile模拟器可以帮助您优化您的响应设计。自己试试吧，让我们知道你的想法和你想看到它的改进。