[網路工具] Responsinator 響應式設計,線上檢測 RWD 數據

網頁設計人員在幫網站做響應式 ( 回應式 ) 設計Responsinator 提供了一個簡單的線上檢測 RWD 方案。使用 Responsinator 這個網路工具掃描網站時,會依據網頁內設計的 RWD 自適應值做分析,在 Responsinator 網頁內輸入想要調試的網站網址,它能幫我們評測網站在多種移動裝置上的自適應狀態。

Responsinator 掃描網站時,以蘋果的 iphone 與 ipad 裝置為主要調試對象,Responsinator 在網站內提供的掃描寬度會依據裝置的橫向及直向範圍以「240px ~ 1024px」顯示,在做自適應設計時有了 Responsinator 可以說是非常便利。

[網路工具] Responsinator 自適應設計,線上檢查 RWD 數據_001




網站資訊

網站名稱:Responsinator
官方網址:「http://www.responsinator.com/
網站性質:提供免費「自適應」掃描頁
工具特點:以蘋果的 iphone 與 ipad 裝置為主要調試對象



操作介紹

前往「http://www.responsinator.com/」,輸入想調試的網站網址按下【Go】,即可開始測量網站在移動裝置上的自適應狀態

[網路工具] Responsinator 自適應設計,線上檢查 RWD 數據_101



按下【 Go 】之後,掃描結果會在頁面下方顯示網站在各種範圍時的比例情形

[網路工具] Responsinator 自適應設計,線上檢查 RWD 數據_102



由於一次在多種範圍下讀取網站,所以 Responsinator 網頁會有些累格的狀況發生,若只有幾種自適應範圍值還沒設定好,建議可以點擊裝置名稱,檢視網站在單一裝置上的自適應狀態,這樣在做自適應調試時速度上會較為快一些。



相關文章

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例


留言

繼續閱讀:

這個網誌中的熱門文章

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] LINE 電腦版行動條碼登入設定

Blogger 文章底部自動加入版權宣告

[教學] Blogger 自訂網址綁定自有域名