Description from extension meta
點擊即可預覽任何頁面的移動視窗。
Image from store
Description from store
現代網路用戶不會停滯不前。他們在辦公室使用 27 吋的顯示器,在火車上使用口袋大小的螢幕,他們希望每個網站都能為這兩種螢幕量身定制。對於設計師、開發者、行銷人員,甚至是日常的高級用戶來說,這每天都會引發一個問題:「這個頁面在真正的手機上看起來會是什麼樣子?」 Chrome 的 DevTools 可以解答這個問題——在你瀏覽完菜單、面板和層層設備框架之後。切換到行動視圖可以將這一過程縮短到只需單擊或使用快捷鍵即可。
點選工具列圖示(或按下 Alt + M),目前頁面將立即限制為手機大小的視窗。柔和的灰色背景將頁面與瀏覽器視窗的其餘部分隔離開來,使您的內容成為焦點,同時在視覺上提醒您移動視圖已啟用。角落處會懸停一個小徽章,顯示目前裝置預設-從 iPhone 14 開始,
該擴充功能附帶三個最常用的斷點——iPhone 14(390 × 844 像素)、Pixel 7(412 × 915 像素)和 iPad mini(768 × 1024 像素)。每個預設都會調整元視口標籤、元素寬度和滾動行為,以模擬所選設備的使用體驗。
誰受益?
前端開發人員無需打開 DevTools 即可在幾秒鐘內捕獲佈局回歸 - 這在處理多個分支或暫存伺服器時非常理想。
UI/UX 設計師在將新的 Figma 作品發送給工程部門之前會進行快速的健全性檢查。
品質保證團隊可以將鍵盤快捷鍵編寫到自動化測試套件中,以實現更快的回應測試。
內容創作者和行銷人員預覽新聞通訊、登入頁面和社交嵌入,以確保在小螢幕上的可讀性。
重現行動用戶報告的問題的客戶支援代理不再需要實體設備或模擬器。
探索響應式設計概念的教育工作者和學生可以獲得一個平易近人、權限安全的沙盒。
無論您是在發布前幾分鐘對結帳流程進行微調,還是在教室裡教授一群有抱負的開發人員,此擴展都可以融入您的工作流程,幾乎不需要任何學習曲線。