內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略！你通常在做網頁設計時都會製作至少2種版本的畫面，分別是電腦版與手機版，再精細的可能會聯同平板的尺寸所顯示的畫面一同設計，但這樣一來工程師的桌上是不是就要有好幾種裝置呢？其實只要使用免費 Chrome 擴充功能 「Responsive Viewer」就可達到同時瀏覽各種裝置畫面的需求囉！接下來就跟著我們的腳步一起來看看 Responsive Viewer 要如何使用吧！
Responsive Viewer 是什麼
Responsive Viewer 是一個免費使用的 Chrome 擴充功能，經安裝後只需要開啟欲瀏覽的網頁，即可在畫面中瀏覽網站在各種螢幕尺寸的畫面顯示效果，Responsive Viewer 內建幾種智慧型手機、平板電腦的解析度大小，例如 Apple iPhone、Google Pixel、Samsung Galaxy 和更大的平板電腦尺寸，甚至使用者也能依照需求新增裝置，透過 Responsive Viewer 就能實測在特定螢幕的網頁顯示情形，亦可調整直式或橫向顯示。
Responsive Viewer 使用教學
第一步：開啟 Responsive Viewer 的 Chrome 線上應用程式商店頁面，點擊「加到 Chrome」並點擊「新增擴充功能 」。
第二步：開啟欲瀏覽的網站後，點擊「擴充功能」中的「Responsive Viewer」，即可開啟瀏覽模式。
第三步：可於左側挑選欲瀏覽的螢幕尺寸。
第四步：上方列可調整顯示的百分比大小，也能將螢幕切換為直式或橫向顯示。
第五步：若要要新增螢幕尺寸，也可於上方列的「＋」按下即可新增。
ChatPDF 免費線上 PDF 學習神器，你不想看的文件讓AI幫你看！
https://www.design-hu.com.tw/webmaster-tools/chatpdf.html
UI Buttons 免費網頁動態按鈕素材，輕鬆踏入網頁設計CSS 的世界！
https://www.design-hu.com.tw/webmaster-tools/iconbros-elegantthemes.html
結語
Responsive Viewer 是可以幫助我們快速瀏覽各種螢幕尺寸裝置畫面的免費 Chrome 擴充功能，不管是工程師、設計師都實用的功能，即使是網站上線後網站管理員也還是可以透過Responsive Viewer 來確認網站資料是否正確，是否有在更換資料時遺漏哪版裝置的資料。
那今天的分享就到這裡告一段落了，如果想了解最新網站知識，也可以到 鵠崙設計 官網看看，我們下次的教學見～
架站資源相關文章：
網站資訊文章推薦
通用 Google Analytics 即將停止服務，快來確認資源有沒有影響！
CTR、CPM、CPC、CPA是什麼？一次搞懂20個網路廣告用語！
行銷組合4P到4C？擬定行銷策略前必須了解的消費者觀點！
