title: [Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 --- **摘要** 網頁設計師在設計網頁時，除了要考慮各種瀏覽器的相容性外，還要考慮在不同解析度下的瀏覽情形，若透過輔助工具來協助就可以節省不少繁瑣的測試步驟。 這篇文章介紹的Google瀏覽器外掛可用來調整瀏覽器視窗的大小，模擬網頁在各種螢幕解析度下的顯示情形。外掛內建八組常用的解析度設定，點一下就可以馬上切換若要測試比較特殊的解析度也可以透過外掛的功能來自訂、新增各種不同的解析度設定，功能非常棒！ **Category** - [網路相關](https://www.soft4fun.net/category/software/internet) **Tag** - [Google Chrome](https://www.soft4fun.net/tag/google-chrome) - [Google瀏覽器](https://www.soft4fun.net/tag/google%e7%80%8f%e8%a6%bd%e5%99%a8) - [調整解析度](https://www.soft4fun.net/tag/%e8%aa%bf%e6%95%b4%e8%a7%a3%e6%9e%90%e5%ba%a6) **圖片清單** - ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer01](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer01.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer01") - ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer03](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer03.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer03") - ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer06](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer06.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer06") - ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer05](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer05.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer05") - ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer04](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer04.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer04") - ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer07](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer07.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer07") --- 網頁設計師在設計網頁時，除了要考慮各種[瀏覽器的相容性](http://www.soft4fun.net/browsing/%E5%9B%9B%E6%AC%BE-ie-%E7%80%8F%E8%A6%BD%E5%99%A8%E7%B6%B2%E9%A0%81%E7%9B%B8%E5%AE%B9%E6%80%A7%E6%B8%AC%E8%A9%A6%E5%B7%A5%E5%85%B7.htm)外，還要考慮在不同解析度下的瀏覽情形，若透過輔助工具來協助就可以節省不少繁瑣的測試步驟。 這篇文章介紹的Google瀏覽器外掛可用來[調整瀏覽器視窗的大小](http://www.soft4fun.net/browsing/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E5%B8%AB%E5%BF%85%E5%82%99%E5%B7%A5%E5%85%B7%EF%BC%8C%E4%B8%80%E9%8D%B5%E8%AA%BF%E6%95%B4%E7%80%8F%E8%A6%BD%E5%99%A8%E8%A6%96%E7%AA%97%E8%A7%A3%E6%9E%90%E5%BA%A6.htm)，模擬網頁在各種螢幕解析度下的顯示情形。外掛內建八組常用的解析度設定，點一下就可以馬上切換若要測試比較特殊的解析度也可以透過外掛的功能來自訂、新增各種不同的解析度設定，功能非常棒！ > **外掛名稱**：Window Resizer > **外掛網址**：[http://4fun.tw/Wo4RR](http://4fun.tw/Wo4RR) （[4fun.tw縮網址](http://4fun.tw)） #### 安裝使用Window Resizer 打開外掛網頁後直接點選【安裝】下載外掛。 > **※ 需使用 Google Chrome 才可安裝** ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer01](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer01.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer01") 安裝完成後，在網址列右邊會看到如下圖紅色框框的按鈕，點下去就會出現各種不同的解析度認你選擇。 ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer03](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer03.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer03") ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer06](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer06.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer06")▲ 解析度切換為 800*600 明顯看到網頁寬度比螢幕大。 #### 自訂新的解析度設定 如果預設的解析度清單沒有你想要使用的，可以選擇【Edit resolutions】來新增。 ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer05](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer05.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer05") 輸入新解析度的寬度(Width)、高度(Height)後，按下 【Save】儲存設定，再按下【Finish editing】完成編輯。 ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer04](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer04.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer04") 剛才新增的解析度就會顯示在清單裡了。 ![[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer07](http://pic.soft4fun.net/imgs/20100414a/GoogleChrome_E6B1/GoogleWindowResizer07.png "[Google Chrome外掛] 網頁設計師必備工具，一鍵調整瀏覽器視窗解析度 GoogleWindowResizer07")