現在幾乎所有人瀏覽網頁都是用手機為主，如果你的網站在電腦上看起來很完美，結果在手機或平板上整個版面跑掉，那不只影響體驗，連轉換率都會跟著受影響。
這次要跟大家分享一款滿厲害的 Chrome 插件「手機模擬器 – 測試響應式網站」，不用另外裝軟體，也不用真的拿出一堆手機，只要在瀏覽器裡就能快速切換各種常見機型、檢查直橫版效果，還可以截圖、錄影，重點是免費版就相當好用 :
(圖片來源 : AI 生成)
Chrome 插件手機模擬器 – 測試響應式網站下載
下載網址可點上方連結進行下載，這套軟體是免費的，但有一些手機、平板版型是需要升級成 Pro 版本才能使用，但我用下來免費版的就已經相當好用了 :
下載完之後，會另外跳出一個頁面，上面會有簡單的使用說明 :
手機模擬器使用教學
接著打開你的 Chrome 應用程式列表，找到手機模擬器 – 測試響應式網站打開它，就會出現以下的畫面 :
簡單介紹它的一些功能，右側的設備這邊，可以選擇現在市面常見的機型，不管是安卓還是 iPhone 都有，而且還有平板設備可供選擇。當然它也不是完全免費的，只要上面有 Pro 的字樣就表示是需要付錢購買方案才能開通，但我覺得只是要觀看網頁效果、截圖、錄影的話，其實免費的設備也夠用了 :
此外它也支援直橫式切換功能，透過這功能你就能知道在手機上直、橫式瀏覽網頁的效果，也能清楚知道響應式網頁到底有沒有發揮作用 :
如果要切換其他網址也很簡單，只要在原先的 Chrome 頁面輸入網址即可更換手機顯示的網址，這部分就只能在上方的搜尋欄輸入，如果是在手機裡面輸入是沒有任何作用的 :
裏頭還有一些設定可更改，像是切換淺/深色主題、顯示手機設備畫面…等，某部分功能依然得付費升級成 Pro 會員才可以使用 :
如果你像阿達一樣本身就有自己的網站，或是本身就是一名網頁工程師，透過這樣的方式你就能明白地知道你的頁面在手機/平板端所呈現的樣貌 :
當然還不只這些功能而已，如果日常你想做出有手機邊框的截圖效果，在這插件也能辦到 :
截圖方式有三種，分別是設備截圖/僅網站截圖/擷取整個頁面 :
按下截圖功能之後，軟體就會問你要儲存還是複製，如果是付費會員的話還可以對這張截圖進行修改 :
截圖的效果分別是這樣子，一個是有手機外框，一個沒有，就看你需要什麼樣截圖效果 :
而且最厲害的是，他甚至還支援螢幕錄影功能 :
點一下就能錄製目前手機所呈現的頁面 :
不過免費版的僅能下載 WEBM 格式，MP4 及 GIF 是需要另外付費解鎖的功能 :
實際畫質跟操作方式可以看這段影片，他是可以用滑鼠來進行觸控操作的。但由於錄製的是 WEBM 格式的關係，畫質並沒有用手機實際錄製的好，但畢竟是免費的，所以我覺得也是夠用了。
整體用下來，這款插件讓你不用真的準備一堆實體裝置，就能在電腦上模擬多種手機和平板尺寸，快速檢查響應式網頁是否正常顯示，還附帶截圖、錄影等功能，對日常教學、寫文章、做簡報也很方便。如果你也常常為「手機版到底長怎樣」這件事煩惱，不妨先從這款免費插件開始，用最簡單的方式，把你的網站在各種裝置上的體驗都檢查一輪 :