📱
responsive previewer,
響應式網頁設計預覽工具
只要輸入 URL，即可在
12 種裝置寬度上預覽響應式設計。
📱
支援 12 種裝置
涵蓋 iPhone 到 PC
🔄
縮放與方向
輕鬆縮小並旋轉畫面
🔒️
無伺服器處理
安全的客戶端渲染
* 如果網站無法載入，可能是因為該網站限制了 iframe 嵌入。
縮放：
方向：
裝置：
輸入 URL 以開始預覽
about,
關於響應式網頁設計預覽工具
響應式網頁設計預覽工具是一款免費的網頁開發輔助工具，讓您可以直接在瀏覽器中快速檢查單一 URL 在各種螢幕尺寸（智慧型手機、平板電腦和桌上型電腦）上的外觀。即使沒有多台實體裝置，您也可以使用 iPhone、iPad 和 PC 等標準裝置解析度來測試設計是否跑版以及版面配置的行為。
how to,
使用方法
STEP 1
輸入 URL
將您想要預覽的網站 URL 貼到輸入框中，然後點擊「預覽」按鈕。
STEP 2
選擇裝置
在手機、平板和桌面分頁之間切換，並選擇您想要測試的特定裝置。
STEP 3
調整方向與縮放
在直向和橫向模式之間切換，或變更縮放比例以將整個預覽畫面放入您的螢幕中。
glossary,
名詞解釋
- 響應式網頁設計 (Responsive Web Design)
- 一種網頁開發方法，可根據所使用裝置的螢幕尺寸和方向，動態改變網站的外觀。
- 視口 (Viewport)
- 網頁中使用者可見的區域。在行動裝置上，使用
<meta name="viewport" ...>標籤來控制顯示寬度和縮放比例。 - 媒體查詢 (Media Queries)
- 一種 CSS3 功能，允許內容渲染適應螢幕解析度、寬度或高度等條件。
faq,
常見問題
- Q.預覽畫面是一片空白，網站沒有顯示。為什麼？
- 如果目標網站為了安全性而設定了 'X-Frame-Options' 或 'Content-Security-Policy'，並且不允許從其他網站嵌入 iframe，瀏覽器將會阻擋顯示。
- Q.我可以預覽本地環境的 URL (localhost) 嗎？
- 可以。如果您在電腦上執行了本地伺服器，您可以輸入像 http://localhost:3000 這樣的 URL 來進行測試。
use cases,
使用場景
📱
在網頁開發期間檢查
快速測試新建立的網頁在智慧型手機或 PC 上的外觀，並在製作過程中找出任何跑版的版面配置。
🚀
發佈前的最終檢查
在發佈部落格文章或到達網頁 (Landing Pages) 之前，無須使用實體裝置即可確認它們是否如預期般顯示。
🤝
與客戶分享設計
當向客戶展示他們的網站在各種裝置上的外觀時，可作為確認工具使用。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
反饋發送成功。感謝您的合作！
發生錯誤。請稍後再試。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.