使用 Responsive Viewer 線上版本無須安裝,輸入目標網址即可在不同裝置的瀏覽框架中檢視網頁,可以自選裝置螢幕、縮放比例、旋轉方向,並在模擬器中測試點擊與捲動等操作。不過,線上版本有部分功能無法執行,透過 Responsive Viewer 擴充功能檢視網頁,還可同步點擊、捲動和保存截圖。
語言:英文
網址:https://try.responsiveviewer.org/
擴充功能:【Chrome 線上商店】
Responsive Viewer 使用說明:
1. 開啟 Responsive Viewer 網站,會先提醒安裝擴充功能可解鎖完整功能,接著會有功能導覽,按下「X」關閉畫面進入檢視器。2. 在檢視器的左上方(或中間處)輸入目標網址載入網頁。(註:第一次使用可能離開網站前往目標網頁,重新打開 Responsive Viewer 就會看到瀏覽框架。)
3. 預設會模擬 iPhone、Pixel、iPad、Macbook 等五種裝置的螢幕尺寸,點擊「裝置」按鈕可以選擇(添加或移除)裝置。
4. 使用者可以從工具列自訂檢視畫面,例如點擊「數字」按鈕會展開縮放比例選項。
5. 點擊「Toggle Mockups」會顯示/隱藏裝置外框,不過並非所有裝置都有外框。
6. 如果想要測試網頁功能,點擊「≡ > Preferences 」打開「show screen scrollbars」選項,就能在每個裝置中捲動網頁和點擊按鈕。
7. 在測試網頁時可以選擇 Single scree 僅顯示一部裝置,以及旋轉螢幕方向進行體驗。
補充:
Responsive Viewer 線上版本的 sync click、sync scroll (同步點擊、捲動)和截圖功能,筆者操作時沒有任何反應,改用擴充功能皆可正常執行。
延伸閱讀:
0 留言