[教學] 電腦模擬 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 套件來說方便許多,最重要的還是得依據你的開發習慣來使用,順手才是最重要的!!

 

臉書留言

一般留言

  • KEN

    已找不到此方法

    • 感謝告知!! 已更新教學文內容
      Chrome 瀏覽器可正常模擬行動頁面
      如有任何問題歡迎提出討論 ~