[教學] 電腦模擬 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 瀏覽器滑鼠右鍵點選【檢查】→【Toggle device toolbar】

或著是直接按 Ctrl + Shift +M 就能夠快捷鍵直接開啟運作此功能

 

 

接著重新整理網頁，便發現切換至行動裝置頁面

按一下 Responsive 可看到多款手機平板可供選擇

若找不到你的裝置再按 Edit 即可新增至名單囉

其操作步驟比起過往更加簡單好上手，趕快學起來

 

 

若是覺得 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 套件來說方便許多，最重要的還是得依據你的開發習慣來使用，順手才是最重要的！！