[Google Chrome外掛] 網頁設計師必備工具,一鍵調整瀏覽器視窗解析度 - 硬是要學
首頁 » 網路相關» [Google Chrome外掛] 網頁設計師必備工具,一鍵調整瀏覽器視窗解析度
Werboy 發表於

[Google Chrome外掛] 網頁設計師必備工具,一鍵調整瀏覽器視窗解析度

文/Werboy

網頁設計師在設計網頁時,除了要考慮各種瀏覽器的相容性外,還要考慮在不同解析度下的瀏覽情形,若透過輔助工具來協助就可以節省不少繁瑣的測試步驟。

廣告,請繼續往下閱讀...

這篇文章介紹的Google瀏覽器外掛可用來調整瀏覽器視窗的大小,模擬網頁在各種螢幕解析度下的顯示情形。外掛內建八組常用的解析度設定,點一下就可以馬上切換若要測試比較特殊的解析度也可以透過外掛的功能來自訂、新增各種不同的解析度設定,功能非常棒!

外掛名稱:Window Resizer
外掛網址http://4fun.tw/Wo4RR4fun.tw縮網址

安裝使用Window Resizer

打開外掛網頁後直接點選【安裝】下載外掛。

※ 需使用 Google Chrome 才可安裝

[Google Chrome外掛] 網頁設計師必備工具,一鍵調整瀏覽器視窗解析度 GoogleWindowResizer01

安裝完成後,在網址列右邊會看到如下圖紅色框框的按鈕,點下去就會出現各種不同的解析度認你選擇。

[Google Chrome外掛] 網頁設計師必備工具,一鍵調整瀏覽器視窗解析度 GoogleWindowResizer03

[Google Chrome外掛] 網頁設計師必備工具,一鍵調整瀏覽器視窗解析度 GoogleWindowResizer06▲ 解析度切換為 800*600 明顯看到網頁寬度比螢幕大。

自訂新的解析度設定

如果預設的解析度清單沒有你想要使用的,可以選擇【Edit resolutions】來新增。

[Google Chrome外掛] 網頁設計師必備工具,一鍵調整瀏覽器視窗解析度 GoogleWindowResizer05

輸入新解析度的寬度(Width)、高度(Height)後,按下 【Save】儲存設定,再按下【Finish editing】完成編輯。

[Google Chrome外掛] 網頁設計師必備工具,一鍵調整瀏覽器視窗解析度 GoogleWindowResizer04

剛才新增的解析度就會顯示在清單裡了。

[Google Chrome外掛] 網頁設計師必備工具,一鍵調整瀏覽器視窗解析度 GoogleWindowResizer07

關於

3C科技部落客,硬是要學共同創辦人,台灣部落客社群(TBC)共同發起人。熱愛發掘、體驗及分享各類科技產品。

Email:werboy@soft4fun.net

Facebook 網友留言

站內留言

[X]
取得更多 3C 新玩意和優惠資訊,立刻加入粉絲團!
關閉

Close