iPhone、Android手機模擬器 (Google Chrome內建)

在Windows作業系統上，很多人常常在手機模擬器，想要透過PC來模擬Android或是iPhone的介面，可是往往很多模擬器的使用方式都非常麻煩，就算找到免費的手機模擬器，可能看完介紹就把網頁關閉。不過別擔心，如果你的手機模擬器用途只是單純要來做網頁測試，想要看看自己的網站在iPhone、iPad甚至是Android上看的樣式，那麼Google Chrome內建的手機模擬器就足夠你使用了。

很多人不知道其實在Google Chrome的開發者工具中，有一個模擬器的功能，可以讓你的Google瀏覽器模擬成行動裝置，或者是其他瀏覽器，透過「Use Agent」的參數設定，可以讓你的Google Chome模擬成Android、iPhone、iPad、BlackBerry(黑莓機)、IE7、IE8、IE9、Firefox等等的瀏覽器，讓你修改網頁一次看到所有介面，讓網頁修得更漂亮。

透過Google內建的開發者工具，我們就可以模擬多種的行動裝置畫面(每一個裝置又不同的解析度)，並且可以透過內建的開發者工具對網頁調整CSS、HTML設定或者是bug修正，使用上十分的方便，在網頁相容性校正上，也有所幫助。這個Google Chrome手機模擬器功能其實長得非常的密，不特別去找的話，一般使用者根本不會發現這樣的功能。

使用Google Chrome的iPad、iPhone、Android模擬器有何作用，這對網頁設計師來講，在做手機版網頁的微調確實有極大的幫助，同時可以透過單一瀏覽器就可以一口氣校正IE、Firefox、Google Chrome、iPad、iPhone、Android以及黑莓機裝置，是不是很方便呢？看到這裡，你想要找的是Android的APP模擬器，那你可能要改用BlueStacks。

如果沒有Google瀏覽器，請先下載：Google Chrome最新版下載。

第1步  以香腸炒魷魚本站為例，這是一般電腦看到的畫面，但是這樣的畫面用到手機上看就不適合了，因為畫面完全不符合，所以香腸先前有用WordPress專用手機版的外掛，去開發WordPress專屬手機版佈景。

第2步  接著我們要啟用Google Chome的手機模擬器，請先點右上角的圖案，再點選【工具】→【開發者工具】，或者是直接快捷鍵﹝Ctrl﹞+﹝Shit﹞+﹝J﹞。

第3步  開啟後，請看到開發人員工具右下角，那邊有一顆很不起眼的齒輪，請點選。

第4步  接著你就會看到一個令人驚豔的設定，這邊全英文。點選【Overrides】並將「User Agent」打勾，下拉選單中可以選擇您要的介面。

第5步  這邊支援多款的介面，從IE、Firefox、Chrome、Android、BlackBerry、iPhone、iPad各式各樣的解析度都有，選擇你需要的吧！

第6步  除了勾選「User Agent」別忘了勾選「Device metrics」，最後點一下「F5」重新整理網頁。

第7步  重新整理後，網頁就會變成手機版了。是不是很簡單呢？這就是香腸炒魷魚的手機版，清單式的文章列表，寬度解析度完全符合手機專屬。

相關文章

免用Photoshop！Adobe Express 免費線上圖片裁切服務

[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告

[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？

免註冊帳號！ChatGPT 開放免費使用並且無任何限制！

[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？

部落格邁入第18年順手更新了版型一下

[教學]如何申請台北捷運誤點證明？

Line Mobile 月租24元！中華電信隱藏資費方案(附邀請碼+申請教學)

菲律賓遊學攻略｜語言學校太多難以抉擇？看這篇就對了！