I love adaptive 線上回應式網頁測試工具,以不同裝置螢幕尺寸瀏覽網站

回應式設計可讓網頁在各種螢幕尺寸都能呈現最佳效果,設計或修改網頁時需要以不同裝置來瀏覽網頁,Chrome 瀏覽器的開發人員工具就能切換行動裝置模式,也能使用 I love adaptive 線上服務來測試網頁效果。

Iloveadaptive測試回應式網頁的免費線上服務

網站簡介:
I love adaptive 是用來測試回應式網頁的免費服務,輸入網址即可在不同裝置瀏覽網頁,有 iPhone、iPad、Galaxy S20、Galaxy Tab 等行動裝置,以及 iMac、MacBook 和 19吋、20吋、23吋等桌上型電腦螢幕尺寸,也能自訂任意尺寸。使用者可以將瀏覽框架切換為直向/橫向顯示,用滑鼠捲動網頁、點擊連結等操作。
網站:I love adaptive
語言:英文
網址:http://iloveadaptive.com/
擴充功能:【Chrome 線上商店】

操作說明:
開啟 I love adaptive 網站,輸入網址按下 Enter 鍵即可用不同裝置螢幕尺寸來檢視網頁。
Iloveadaptive測試回應式網頁的免費線上服務

預設會以 iPhone 手機開啟網頁包含各種型號,每個瀏覽框架上方都標示型號與螢幕尺寸,要查看網頁效果相當方便。
Iloveadaptive測試回應式網頁的免費線上服務

使用者可以勾選(或取消)顯示裝置也能自訂任意尺寸(Custom size),檢視網頁時可將直向畫面切換為橫向。
Iloveadaptive測試回應式網頁的免費線上服務

在右側 DECVICES 可以點選平板和桌上型電腦,同樣有不同型號的螢幕尺寸。
Iloveadaptive測試回應式網頁的免費線上服務

行動裝置還能點選「Android」系統加入 Galaxy 裝置。
Iloveadaptive測試回應式網頁的免費線上服務

更換網址即可查看不同網頁,也能在瀏覽框架上點擊連結開啟另一個網頁,此外.右側 SETTINGS 有顯示 iOS 控制列、自訂高度、禁止捲動,以及縮放比例等選項。
Iloveadaptive測試回應式網頁的免費線上服務

上述介紹是用不同(多個)裝置螢幕來查看同一個網頁,還能點選「Compare Urls」以單一裝置來開啟多個網頁。
Iloveadaptive測試回應式網頁的免費線上服務

延伸閱讀:
使用 Chrome 瀏覽器檢視 RWD 響應式網頁設計,免安裝任何工具
everysize 以不同裝置檢視網頁,可自訂尺寸一次顯示多個螢幕畫面

張貼留言

0 留言