這是我們第七條中介紹了一系列有用的和免費的工具和技術(shù)，開發(fā)和發(fā)布的Web設(shè)計界的活躍會員。第一篇文章涉及PrefixFree第二次推出的基金會，一個負責(zé)任的框架;提出Sisyphus.js第三，庫類似Gmail的客戶端草稿。第四共享一個免費的插件我們稱為GuideGuide，后來我們已經(jīng)宣布了Erskine的響應(yīng)的網(wǎng)格生成Gridpak和雷米夏普的調(diào)試工具JS斌。
早在2009年，當(dāng)編碼版本的Opera Mobile 10，我歌劇院的同事決定調(diào)整的Opera Mobile版本的機器，使生產(chǎn)出不僅對普通的移動平臺為基礎(chǔ)，但Windows和Linux。原本用于質(zhì)量保證和測試，也證明了這些桌面版本是有用的Web開發(fā)，能夠在臺式機上使用的Opera Mobile帶走了需要做的所有測試的手機上，手機瀏覽器窗口突然ALT /命令+ Tab鍵從我們的文本編輯器-精彩！
所以，我們決定，以消除皺紋的位，增加了MAC構(gòu)建通道，并把它變成一個公開可用的開發(fā)工具，稱為Opera Mobile的仿真器。在一個相當(dāng)小的尺寸時，Opera Mobile模擬器可以從Opera的開發(fā)者網(wǎng)站，或從Mac App Store的免費下載，并安裝它是簡單的。引擎和用戶界面是完全一樣的，當(dāng)您在手機上運行的Opera Mobile，而桌面特定的鉤子，如配置文件選擇器，鍵盤快捷鍵和命令行標志，給你一點點額外的調(diào)試功能。
在這篇文章中，我們將看看如何使用Opera Mobile的仿真器來創(chuàng)建響應(yīng)的設(shè)計，我們將討論一些更奇特的設(shè)置。
披露：我工作的Opera軟件公司的Opera Mobile模擬器是產(chǎn)品經(jīng)理，除其他事項。
基本用法
啟動模擬器時，迎接你的配置文件選擇。使用配置文件的左側(cè)，你可以啟動一個或多個Opera移動設(shè)備特定的設(shè)置實例。例如，選擇“HTC渴望”個人資料將推出的Opera Mobile在WVGA（480×800像素）的150％縮放級別肖像模式，就像它在實際的HTC Desire手機。如果您選擇不同的配置文件，設(shè)置一個單獨的Opera Mobile的實例將推出與該配置文件相匹配。
可以加載輸入的URL中的地址的酒吧（obviously!），否則拖放到瀏覽器窗口中的任何文件或URL的頁面。頁面導(dǎo)航同樣也很簡單：點擊匹配水龍頭，你可以使用兩指手勢觸控板來放大和縮小頁面。如果是后者無法正常工作，你可以在你的機器上使用您的鼠標滾輪，或通過點擊“+”和“ - ”出現(xiàn)在瀏覽器窗口的覆蓋，當(dāng)你平移放大。
你會發(fā)現(xiàn)來自四面八方，催生Opera Mobile的情況下，可以調(diào)整大小和加載網(wǎng)站的布局將相應(yīng)改變。這是，當(dāng)然，不同的設(shè)備上的瀏覽器是一個全屏幕的應(yīng)用程序的經(jīng)驗，但是當(dāng)你想測試你的視口的?meta標簽或媒體查詢設(shè)置工作在不同的屏幕尺寸，它是非常方便的。事實上，調(diào)整的Opera Mobile的實例來測試不同的布局會給你一個更真實的感受，不是做同樣的桌面瀏覽器的視口的行為，因為后者不會響應(yīng)不同的視口設(shè)置，所以可能會視口相關(guān)的錯誤被忽視。
值得一提的在Opera Mobile模擬器的設(shè)備寬度媒體查詢查詢在電腦屏幕的寬度，而寬度推出的Opera Mobile的實例。另外，如果你只是有興趣在檢查之間的差異縱向和橫向的，你可以使用Alt / Option鍵+ R組合鍵，或點擊“旋轉(zhuǎn)屏幕”按鈕在右下角。
當(dāng)然，每個人的工作流程是不同的，我在這里，以幫助你更有效的，沒有規(guī)定。顯然，沒有什么比在實際設(shè)備上測試，因為你會得到一個準確的概念的手感，您的網(wǎng)站在移動的環(huán)境中，在設(shè)備上有限的CPU等。然而，實際的設(shè)備測試是挑剔的，所以我寧愿離開它，直到我的項目已達到至少阿爾法質(zhì)量，寧愿一個快速（1）發(fā)展，（2）使用Opera Mobile模擬器測試，同時也得到了項目（3）調(diào)試迭代掉在地上。
高級啟動選項
在右側(cè)的配置文件選擇器，你會發(fā)現(xiàn)一些配置文件選項。
“解決方案”下拉菜單讓你選擇了一些常見的屏幕尺寸和方向之間，的選項添加您自己的?！跋袼孛芏取钡南吕藛瘟斜碇械腜PI值的HTC Desire，這是252，這將導(dǎo)致150％的默認的變焦和devicePixelRatio?1.5啟動時。選擇的PPI，例如，285上，另一方面，將導(dǎo)致200％在一個縮放級別和相應(yīng)的devicePixelRatio?2。
總之，這樣的組合會有所不同的分辨率和像素密度值，每個配置文件和影響如何在視口中的行為，以及確定哪些媒體查詢應(yīng)用。
最后，“輸入法”下拉菜單，允許你選擇三種輸入模式之間某些UI和UA的變化都與：
- “觸摸”?
，此選項將啟動Opera Mobile的觸摸屏手機上使用的UI進行了優(yōu)化，并給它一個UA字符串歌劇院摩比。 - “鍵盤”，
此選項將推出的Opera Mobile與非觸摸屏手機優(yōu)化的用戶界面和快捷鍵-開發(fā)者的方便，鼠標點擊，平移和縮放手勢仍然可以工作，雖然。UA字符串將包含歌劇摩比。 - “平板電腦”?
，此選項將推出的Opera Mobile與平板優(yōu)化的UI。在這種情況下，的UA字符串將包含歌劇院平板電腦。
帶參數(shù)啟動
在配置文件中選擇最后一個選項的參數(shù)字段，這可以說是最強大的一個的一群。在里面，你可以輸入一些參數(shù)或標志，這將被用來啟動一個新的Opera Mobile的實例。例如，顯示尺寸320×480網(wǎng)址www.opera.com將推出的Opera Mobile與窗口尺寸為320×480像素，并加載www.opera.com。
這些標志也可以在命令行。默認情況下，在Opera Mobile模擬器可執(zhí)行文件從以下位置：
- MAC?
/應(yīng)用/ Opera Mobile的Emulator.app /目錄/資源/歌劇Mobile.app的/目錄/馬喬什/ - Windows的
C：\ Program Files文件\的Opera Mobile模擬器\ - Linux的
/ usr / bin中/
重復(fù)我們的最后一個例子如下所示：
- 蘋果
/歌劇\ Mobile的顯示尺寸320×480網(wǎng)址www.opera.com - Windows的
OperaMobileEmu.exe顯示尺寸320×480網(wǎng)址www.opera.com - Linux的
operamobile顯示尺寸320×480網(wǎng)址www.opera.com
兩個參數(shù)來測試響應(yīng)的設(shè)計非常方便，當(dāng)是displayzoom和monitorppi：
- displayzoom
這是有用的，如果你想Opera Mobile的實例的大小，以減少占用您的桌面上，同時保留其報告的寬度和高度值，devicePixelRatio和等。換句話說，如果你想嘗試一下“三星GALAXY NOTE”的個人主頁上，這將導(dǎo)致在瀏覽器的尺寸為800×1280像素，那么你就可以添加-一- displayzoom 50標志啟動它的四分之一尺寸的表面400×640像素-高900像素的屏幕，例如，一臺MacBook Air的一個更好的匹配。 - - monitorppi
，另一方面，允許您設(shè)置您的計算機顯示器（例如，monitorppi 128的13英寸的MacBook Air）的生產(chǎn)者價格指數(shù)和推出的Opera Mobile的實例與調(diào)整，以匹配的物理尺寸縮放因子的異形手機的屏幕。這會給你一個更好的主意有多大，也就是說，可點擊的區(qū)域真的會在實際設(shè)備上加載頁面時，但請記住，你將在屏幕上的PPI將不能代表你會看到設(shè)備。
請注意，-displayzoom和-monitorppi是互斥的，因此不能被一起使用。
可能的參數(shù)的完整列表，請單擊“幫助”中的配置文件選擇，或在命令行中運行模擬器-幫助參數(shù)。
在瀏覽器中設(shè)置
有一件事要記住的是，即使推出了Android配置文件的Opera Mobile的實例，UA可能會有所不同。您可以更改UA字符串推出的Opera Mobile后，通過點擊紅色的“O”?設(shè)置→高級→用戶代理，在那里你可以選擇五個選項，包括“機器人”如果你需要設(shè)置一個完全自定義UA字符串，歌?。号渲玫腢RL字段中搜索“自定義的User-Agent?！痹谶@個領(lǐng)域，你可以設(shè)置一個自定義的UA字符串，這將覆蓋任何其他UA字符串。
值得強調(diào)的是設(shè)置清除的cookies，緩存和共享位置，發(fā)現(xiàn)在設(shè)置→隱私，并切換到關(guān)閉屏幕上的鍵盤，發(fā)現(xiàn)下設(shè)置→高級→歌劇院鍵盤的選項。
連接到先進的Opera蜻蜓調(diào)試
在任何Web項目中，有一個點時，你絕對需要看看引擎蓋下的瀏覽器中看到什么是怎么回事。這就是為什么Opera Mobile的仿真器可以與Opera的Opera蜻蜓，內(nèi)置的Web調(diào)試。
您可以輕松地設(shè)置如下：
- 下載，安裝和運行Opera的桌面。
- 將一個網(wǎng)頁在Opera的桌面，用鼠標右鍵單擊任何地方，并點擊“檢查元素”的啟動Opera蜻蜓。
- 在Opera Dragonfly，單擊“遠程調(diào)試配置”按鈕（在右上角的第三個按鈕），然后單擊“應(yīng)用”（默認設(shè)置就可以了）
- 然后，打開Opera Mobile的仿真器和啟動Opera Mobile的實例。
- 歌?。涸贠pera Mobile的調(diào)試，然后單擊“連接”（默認設(shè)置就可以了）
- 您現(xiàn)在已連接，并且可以加載任何你想要的網(wǎng)頁在Opera Mobile調(diào)查。修改標簽的時候，一定要選擇正確的調(diào)試環(huán)境（在右上角的第四個按鈕）在Opera Dragonfly。
，例如，在Opera蜻蜓的網(wǎng)絡(luò)→網(wǎng)絡(luò)日志，你可以檢查媒體查詢是否被正確寫入，以及是否在樣式表中引用的圖像文件沒有不必要的下載與小屏幕尺寸的設(shè)備。如果做得正確，你應(yīng)該只看到他們朝下方的瀑布圖時彈出擴展的Opera Mobile瀏覽器窗口的尺寸。
另外值得一提的是根據(jù)網(wǎng)絡(luò)→網(wǎng)絡(luò)選項的功能。有一個復(fù)選框來禁用所有緩存（你可能想要做測試時，），有一個選項來設(shè)置全局頭覆蓋-這是特別方便，當(dāng)你依賴于瀏覽器嗅探（careful!），或特定的報頭，以優(yōu)化您的的內(nèi)容，你想不開放不同的瀏覽器來測試不同的標題變化。
對于其他的Opera蜻蜓的功能，包括那些相關(guān)的檢查DOM，CSS和腳本分析，挑選顏色，并使用命令行的概述，我建議看在Opera蜻蜓文檔。
所以，這是一次總結(jié)！我希望你喜歡這篇介紹的Opera Mobile模擬器可以幫助您優(yōu)化您的響應(yīng)設(shè)計。自己試試吧，讓我們知道你的想法和你想看到它的改進。
