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專屬手機版佈景

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

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

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

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

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

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

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

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

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

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

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

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

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



  • RandyHung

    新版Chrome:
    開發人員工具 > 按ESC > 選Emulation > … 看到畫面就會操作了

  • Guest

    目前版本 33.0.1750.146 m 已無此功能。

    • http://sofree.cc/ 張香腸

      很像是….

  • 123

    我都案完ㄖ~都最後還跳回??

    • http://sofree.cc/ 張香腸

      他只是暫時性模擬,主要用於網頁開發。

  • ts

    https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

    好像比較快(?

    • http://sofree.cc/ 張香腸

      這也是可以~

  • 許庭彰

    其實按F12就解決了.

    • http://sofree.cc/ 張香腸

      我自己是都按F12~ XD

  • 不會變

    那要怎嚜變回去0.0″?

    • http://sofree.cc/ 張香腸

      關閉,網頁重整就可以了~~

  • http://esofthard.com 張傑克

    襪賽~~還真的不知道ㄟ

  • 阿災

    請問Device metrics下面的Fit in window是什麼模式阿
    打勾後整個版面縮成一坨 = =

    • http://sofree.cc/s9011514/ 香腸

      應該是依照設備尺寸顯示~~ 其實我也不太清楚XD