逍遙の窩

我懂得不多;分享我懂的。

2020/05/02

everysize 查看網頁在不同裝置的呈現效果,自訂任意尺寸一次顯示多個螢幕畫面

現在的網頁都採用響應式設計,使用 Chrome 開發人員工具可切換多種行動裝置來檢視網頁。如果想更快速查看網頁可以到 everysize 網站,有手機、平板/桌機電腦的預設尺寸,而且一次顯示多個螢幕不必逐一切換。


網站簡介:
everysize 是個簡單容易使用的網頁檢視工具,能查看網頁在不同裝置的呈現效果,可選擇 iPhone、iPad、Google Pixel、Samsung Galaxy 等裝置的螢幕尺寸和自訂任意尺寸,在單一頁面檢視多個螢幕並過框架瀏覽網頁相當方便。


網站:everysize
語言:英文
網址:https://everysize.kibalabs.com/
功能:查看響應式網頁效果,可自訂任意螢幕尺寸。

操作說明:
開啟 everysize 網站,貼上想要查看的網址按下「GO」。


接著會在新分頁看到四個不同尺寸的螢幕,螢幕畫面就是剛才網址,點擊右下方「+」增加螢幕或按下「X」關閉螢幕。


點選裝置名稱可切換 iPhone、iPad、Google Pixel、Samsung Galaxy 和桌機等多種尺寸,從百分比處可調整螢幕畫面比例(預設是 40% )。


除了各種裝置的預設尺寸,還能輸入自訂尺寸來檢視網頁。


滑鼠按住螢幕左上角可以拖曳排列位置,網站會以 Cookie 保留螢幕設定方便再次查看網頁效果,但如果刪除瀏覽器 Cookie 就恢復預設值。


需要檢視另一個網頁的話可在上方更換網址,或直接在螢幕框架上瀏覽網頁並點擊連結。


延伸閱讀:
Responsive Web Design Tester 快速預覽響應式網頁(擴充功能)
Mobile View Switcher 將電腦瀏覽器切換到手機模式(擴充功能)
免費 Blogger 自適應版型,讓電腦&行動網頁一致優化SEO

沒有留言:

張貼留言

● 與本站聯絡:電子郵件FB 粉絲專頁
● 站內提供下載的軟體經由網路取得,版權皆屬於原創者(公司)。
● 影音下載介紹網站/軟體功能,隨意下載並散播影片可能觸法,請自行注意。
● 本著作係採用創用 CC 姓名標示-非商業性-禁止改作 4.0 國際 授權條款授權。