原文網址：http://www.techbang.com/posts/2905-column-the-opera-mobile-o-simulator-to-create-the-perfect-mobile-site

以下轉載原文

-------------------------------------------------------------------------------------------

【編按】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模擬器上的網站做遠端除錯。如此更可以設計出適合各種螢幕尺寸觀看的完美網頁，節省測試的時間與精力。

參考資源：

• Opera Mobile 模擬器
• Opera Dragonfly 除錯程式

原文網址：http://www.minwt.com/?p=2501

以下轉載原文

------------------------------------------------------------------------------------------------------

　　現在隨著行動上網愈來愈夯，各大入口網站也紛紛的開始製作行動裝置的網頁，雖然說新一代智慧型手機中的瀏覽器，與電腦中所用的瀏覽器幾乎相同，皆可正常的瀏覽各大網站，但由於手機的螢幕與電腦相比，差異相當的大，以至於當使用手機來瀏覽電腦網頁時，就得手指放大魯來魯去，才可找到自已所要的資訊，這對於手機瀏覽上有些不便，所以會發現到，各大網站則會專門針對手機的版面加以設計，讓版面符合手機的瀏覽模式，除此之外使用者用手機瀏覽時，網頁也會自動切換為手機版本，而要這要怎麼辦到呢？ 其實這需要透過Server端的程式來作一點小判斷，就可以作到自動的切換，這邊梅干整理一下手邊的資料， 分別針對PHP與ASPX作介紹。 

PHP版本判斷：

$mobile_browser = '0';
 
if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}
 
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}    
 
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda','xda-','Googlebot-Mobile');
 
if(in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}
 
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
    $mobile_browser++;
}
 
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
    $mobile_browser=0;
}
 
if($mobile_browser>0) {
        header("Location: mobile.php"); //手機版
}else {
        header("Location: pc.php");  //電腦版
}

ASPX版本判斷：

  protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Headers["user-agent"] != null && Request.Headers["user-agent"].ToLower().ToString().IndexOf("windows") != -1)
        {                        
            Response.Redirect("pc.aspx"); //電腦版 
        }
        else
        {
            Response.Redirect("mobile.aspx"); //手機版
        }
    }

之後上傳到網頁空間中，當用手機瀏覽時，就會自動切換到手機版的網頁，若是使用電腦時，就會自動切換為電腦的版本，經梅干測試的結果，目前在iPhone與Andriod平台皆可正常切換，由於手邊沒有WinPhone，也請各位有WinPhone的朋友幫忙測試看看囉！
 

[範例預覽－ASPX版本] [範例預覽－PHP版本] [範例下載]

原文網址：http://www.minwt.com/?p=2529

以下原文轉載

---------------------------------------------------------------------------------------------

先前梅干已分享一篇，手機版網頁自動切換，當會自動切換後，接下來就是要開始來製作手機版的網頁囉！其實看起來手機中的瀏覽器與電腦相同，只要電腦版能正常運作，在手機上應該都可正常預覽，確實是如此但今天若要專門讓手機來瀏覽時，這時就有點不太相同了，除了版面要另外設計外，還有一個相當重要的東西，那就是版頭的宣告，一般在作網頁時，上面所宣告的是給電腦版使用，若用此宣告放到手機版時，則會發現到怎網頁的版面都縮小，這是由於手機內建的瀏覽器，當網頁為電腦版就會把版面撐到980像素，所以當要開始製作手機版網頁時，首先要做就是版頭的宣告，這樣網頁在手機下，才可正常顯示手機版的尺寸大小。

在宣告的部分有二種方式，一種是加在html上，另一種是加在<head>~</head>之間，二者取其一就行了，若要二邊都加的話也可以。
方法一、加在<html>上方：

方法二、加在<head>~</head>之間：

　　當加完畢後，這時再用手機瀏覽看看，這時版面就不會縮起來，就會依照手機的顯示尺寸，只要一個小動作卻有１８０度的大不同，而梅干也弄了個小範例，一個是有加手機版網頁宣告，另一個是一般的網頁宣告，各位可以用手機瀏覽看看喔！若你也正準備開始著手開發手機網頁時，別忘了記得要加入手機版的網頁宣告喔！