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