这是我们第七条中介绍了一系列有用的和免费的工具和技术，开发和发布的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调试。
您可以轻松地设置如下：
下载，安装和运行opera的桌面。 将一个网页在opera的桌面，用鼠标右键单击任何地方，并点击“检查元素”的启动opera蜻蜓。 在opera dragonfly，单击“远程调试配置”按钮（在右上角的第三个按钮），然后单击“应用”（默认设置就可以了） 然后，打开opera mobile的仿真器和启动opera mobile的实例。 歌剧：在opera mobil