【O專欄】用模擬器幫你寫手機網站

【O專欄】用模擬器幫你寫手機網站

【編按】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...),螢幕長寬度,以及是否為觸摸螢幕等。

【O專欄】用模擬器幫你寫手機網站

▲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/ 

【O專欄】用模擬器幫你寫手機網站

▲在Mac的終端機中輸入設定指令來設定手機畫面模擬器。

Step 2:需要輸入的指令列為:-geometry 640x480 -notouch

  • Windows的指令是:OperaMobile.exe -geometry 640x480 -notouch
  • Linux/Mac的指令是:./operamobile -geometry 640x480 -notouch

【O專欄】用模擬器幫你寫手機網站

▲目前常見的直向與橫向手機與7吋平板電腦的螢幕解析度,都可以透過Opera Mobile模擬器來設定。

在手機網頁直接抓臭蟲

Opera Mobile模擬器有個很方便的功能,就是能直接在電腦上為手機網頁除錯(debug)。當然你必須先安裝Opera桌面型瀏覽器,叫出附屬的Dragonfly除錯工具。Dragonfly是Opera所開發的開源除錯工具,目的是讓開發者可以在瀏覽器上即時為網頁除錯。現在除了可以在Opera桌面瀏覽器上使用Dragonfly,Opera Mobile模擬器也可以遠端除錯。步驟如下:

Step 1:從Opera桌面型瀏覽器選單找到「工具>進階>Opera Dragonfly」。

Step 2:底下視窗便是Dragonfly的工具列,進入「設定>遠端除錯>勾選遠端除錯」。

【O專欄】用模擬器幫你寫手機網站

▲內建於Opera桌面瀏覽器的Dragonfly除錯程式。

Step 3:到Opera Mobile模擬器中輸入「opera:debug」,然後按下「Go」。

Step 4:Opera Mobile模擬器中IP號碼和通訊埠必須與Dragonfly的設定一樣,然後按「套用」。

【O專欄】用模擬器幫你寫手機網站

▲Opera Mobile模擬器連接Opera Dragonfly進行遠端除錯。

Step 5:設定完成後透過Dragonfly所進行的除錯,可以馬上在Opera Mobile模擬器中看見。

【O專欄】用模擬器幫你寫手機網站

▲利用Opera Dragonfly除錯程式秀出T客邦網站的網頁程式碼。

【O專欄】用模擬器幫你寫手機網站

▲在Opera Mobile模擬器裡調校Techbang網站。

總結

透過Opera Mobile的模擬器,程式設計師可以觀看網頁在不同手機上的表現,更可以透過Opera Dragonfly,在Opera Mobile模擬器上的網站做遠端除錯。如此更可以設計出適合各種螢幕尺寸觀看的完美網頁,節省測試的時間與精力。

參考資源:

謝子斌(Zi-Bin)
作者

目前Opera挪威總部擔任Opera網路宣講師,在世界各地宣講網路標準技術,包括HTML5、CSS3等。此外也於W3C擔任HTML小組成員、HTML5中文小組主席。

使用 Facebook 留言
F0e88ddc89b903b99f5408aa9ca685b8?size=48&default=wavatar
2.  pou (發表於 2010年6月28日 13:58)
這個真的很棒阿,我很需要這樣的功能.不然在手機上都不知道怎麼debug網站的內容了.太棒了.Thank you.
發表回應
謹慎發言,尊重彼此。按此展開留言規則