這是我們第七條中介紹了一系列有用的和免費的工具和技術，開發和發布的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模擬器可以幫助您優化您的響應設計。自己試試吧，讓我們知道你的想法和你想看到它的改進。