作者：謝子斌（Zi-Bin） 發表於 2010-06-27 17:54
原題名：用模擬器幫你寫手機網站
【編按】Opera除了長期支持、制定、推廣HTML、CSS等網頁標準外，由於也針對各種裝置打造瀏覽器，所以對行動裝置網頁介面的打造也有著相 當豐富的經驗。各大網站紛紛打造行動裝置使用的網頁，像是最近蘋果日報也都推出手機版。要如何測試行動版網頁是否能正常運作呢，看看Opera 推出的解決方案：
隨著3G網路的普及化，而且上網功能從智慧型手機開始向中、低階手機擴張，愈來愈多人開始用手機上網。有些人喜歡用手機搜尋、閱讀 新聞、有的人喜歡玩Twitter、噗浪、或是上Facebook看看好友的即時狀況。因為這樣的需求，也讓使用者對於手機瀏覽器的要求與期望變得越來越 高。大致上，主流的手機瀏覽器開發商通常也擁有桌面版的瀏覽器，比如Opera、Apple的Safari、微軟的IE；也有一些開發者專門只做手機瀏覽 器，如SkyFire、以及中國大陸網民慣用的UCWeb等。
手機瀏覽器多變，網頁設計困難遽增
大部份的人可能不知道，由於手機硬體與作業系統的不同，手機瀏覽器會進一步分為智慧型手機（Smart Phone）與功能型手機（Feature Phone）兩種。一般來說，智慧型手機的瀏覽器功能較完善，而功能型手機的瀏覽器會更節省硬體資源，讓行動瀏覽較有效率。
以目前手機瀏覽器市占率較高的Opera來說，Opera Mobile和Opera Mini便是如此。Opera Mobile僅能安裝在S60、Windows Mobile、Maemo等智慧型手機，瀏覽功能完善且較符合網絡標準。而Opera Mini能夠壓縮網頁的特性，可以適合市面上大部份手機系統（包括iPhone）使用。與SkyFire和UCWeb這些瀏覽器相較，能夠使用Opera 的手機種類比較多。而Safari與IE都直接內建在智慧型手機的作業平台中，有的玩家會額外下載第二個手機瀏覽器來滿足不同的用途。可是這麼多的手機瀏 覽器，跑出來的網站畫面都不相同，對網站開發者而言是一大挑戰。
利用Opera Mobile模擬器預覽
網站經營者一定會發現來自手機的流量與日俱增，得為手機介面進行最佳化。但打開流量紀錄，各式各樣的手機、各式各樣的瀏覽器，透過Wi-Fi、 3G、EDGE等各種連線都有，要怎麼作才好？真的會讓開發者一個頭兩個大。在不久的將來，還會小尺寸的平板電腦、行動多媒體播放器、掌上型遊戲機以及電 子書等等，通通都會湧入上網的行列，網站要在不同螢幕尺寸、不同手機設備上保持一致美觀的畫面，讓訪客感到滿意實在不容易。
以前，開發者如果要確保網站在手機螢幕上完美呈現，得要拿不同款式的手機一個個進行測試。不過現在有免費的Opera Mobile 模擬器（Opera Mobile Emulator）， 讓網站開發者能透過它測試網站在各式不同使用環境的表現。可以設定不同的裝置連線規格，包括了手機的User Agent String（如S60、Windows Mobile...），螢幕長寬度，以及是否為觸摸螢幕等。
▲Opera Mobile模擬器在Mac上模擬手機瀏覽器的畫面。
Opera Mobile模擬器可以讓你設定不同的手機螢幕使用界面，但必須透過工具程式（Utility Command）的命令列來設定以下選項：（備註：倘若要查看更詳細的參數，也可以透過「OperaMobile --help」列舉。）
- -geometry（寬x長）
- -notouch（取消觸控設定）
- -widgetmanager（啟動 Opera Widgets）
現在就來實際操作，假如我們要啟動一個640 x 480、沒有觸控功能的手機畫面模擬器：
Step 1：先在終端機找出Opera Mobile的預設位置：
- Windows：C:\Program Files\Opera Mobile 10\
- Linux：/usr/bin/
- Mac：/Applications/Opera Mobile.app/Contents/MacOS/
▲在Mac的終端機中輸入設定指令來設定手機畫面模擬器。
Step 2：需要輸入的指令列為：-geometry 640x480 -notouch
- Windows的指令是：OperaMobile.exe -geometry 640x480 -notouch
- Linux／Mac的指令是：./operamobile -geometry 640x480 -notouch
▲目前常見的直向與橫向手機與7吋平板電腦的螢幕解析度，都可以透過Opera Mobile模擬器來設定。
在手機網頁直接抓臭蟲
Opera Mobile模擬器有個很方便的功能，就是能直接在電腦上為手機網頁除錯（debug）。當然你必須先安裝Opera桌面型瀏覽器，叫出附屬的Dragonfly除錯工具。 Dragonfly是Opera所開發的開源除錯工具，目的是讓開發者可以在瀏覽器上即時為網頁除錯。現在除了可以在Opera桌面瀏覽器上使用 Dragonfly，Opera Mobile模擬器也可以遠端除錯。步驟如下：
Step 1：從Opera桌面型瀏覽器選單找到「工具＞進階＞Opera Dragonfly」。
Step 2：底下視窗便是Dragonfly的工具列，進入「設定＞遠端除錯＞勾選遠端除錯」。
▲內建於Opera桌面瀏覽器的Dragonfly除錯程式。
Step 3：到Opera Mobile模擬器中輸入「opera:debug」，然後按下「Go」。
Step 4：Opera Mobile模擬器中IP號碼和通訊埠必須與Dragonfly的設定一樣，然後按「套用」。
▲Opera Mobile模擬器連接Opera Dragonfly進行遠端除錯。
Step 5：設定完成後透過Dragonfly所進行的除錯，可以馬上在Opera Mobile模擬器中看見。
▲利用Opera Dragonfly除錯程式秀出T客邦網站的網頁程式碼。
▲在Opera Mobile模擬器裡調校Techbang網站。
總結
透過Opera Mobile的模擬器，程式設計師可以觀看網頁在不同手機上的表現，更可以透過Opera Dragonfly，在Opera Mobile模擬器上的網站做遠端除錯。如此更可以設計出適合各種螢幕尺寸觀看的完美網頁，節省測試的時間與精力。
參考資源：
