[教學] 電腦模擬 Android、iOS 行動網頁@適用 Chrome、Firefox、Opera 瀏覽器

智慧手機與平板電腦行動裝置市占率可說是越來越高,想必不少網站開發者、設計人員也將頁面新增行動裝置或是自適應網頁設計介面??開發過程無奈手邊沒機器沒法除錯很麻煩??其實你可以透過電腦環境打造手機行動網頁模擬瀏覽器,無論是常用 Google Chrome & Firefox & Opera 瀏覽器皆適用,透過變更「Use Agent」參數模擬 Android、iPhone、iPad 甚至是 IE、BlackBerry(黑莓機) 都不是問題,下面一系列操作教學趕快來瞧瞧。



簡介:Google Chrome & Firefox & Opera 瀏覽器載點

Firefox:http://sofun.tw/firefox/

Opera:http://sofun.tw/opera/

Google Chrome:http://sofun.tw/google-chrome/

 

 

上面這張示意圖為 "簡單生活Easylife" 使用電腦瀏覽器看到的畫面,因為有開發手機版專用佈景,所以使用行動裝置看到的畫面會完全不一樣,究竟在電腦版 PC 環境如何模擬呈現手機、平板電腦瀏覽器畫面??

 

如何模擬手機/平板電腦 (Google Chrome):

 

 

Google Chrome 瀏覽器點選【工具】→【開發人員工具】

 

 

瀏覽器下方找到"齒輪"圖示點選

【General】→【Appearance】

第一個 Show ‘Emulation’ 打勾

 

 

按叉叉關閉接著按 ESC,原本僅有"上圖一"三個選項

若是把 Show ‘Emulation’ 打勾後發現多彈出選項。

 

 

這有超多手機.平板電腦裝置可供模擬

選擇好模擬瀏覽器樣式後按 Emulate

 

 

設定完成後頁面會自動重新整理顯示行動裝置版網頁。

 

 

若是覺得 Google Chrome 瀏覽器設定麻煩可以下載外掛套件

※ Ultimate User Agent Switcher 載點:網址

 

 

下載安裝完成發現網址列多了紅色按鈕

按下 "立即啟用" 模擬的裝置即可!!

 

 

紅色鈕會顯示目前模擬瀏覽器裝置

取消再點選 "立即啟用" 就可以了!!

 

如何模擬手機/平板電腦 (Firefox 火狐):

 

 

套件名稱:User Agent Switcher

網址:http://download.sofun.tw/firefox-user-agent-switcher/

 

 

下載安裝完成導航列 – 工具 – Default User Agent 選擇裝置。

 

如何模擬手機/平板電腦 (Opera):

 

 

新版本 Opera 瀏覽器採 Chromium 核心架構

所以介面、操作跟 Google Chrome 相去不遠

因此只需要參照前面介紹的教學步驟就好了。

 

 

或著可以下載 Opera Mobile – 電腦模擬手機畫面瀏覽器套件:網址

 

總結:所有模擬行動裝置網頁瀏覽器比較,我覺得還是 Google Chrome 操作最簡便,此外還可以藉由內建 "檢查元素" 功能來進行即時修改、除錯,比起 Firefox 還得要安裝 Firebug 套件來說方便許多,最重要的還是得依據你的開發習慣來使用,順手才是最重要的!!

 

臉書留言

一般留言