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

Window Resizer 為 Chrome 瀏覽器的擴充外掛工具套件，它能幫助使用者調整瀏覽器視窗，來模擬各種屏幕分辨率的寬度及高度比例大小，方便網站設計開發人員調整瀏覽器及網頁大小，使網站適合在各種行動裝置上呈現，讓訪客有個良好的互動體驗。

現今的智慧型移動設備長寬比例百百款，若要特別為某種機型做特定的寬度調適，想必會很頭疼。有了 Window Resizer 也不用擔心，因為 Window Resizer 除了預建了幾組常用的屏幕響應值外，也支援「自訂義大小」供設計人員方便的幫網站佈局。

另外， Window Resizer 也貼心的內建了「快速鍵」選項供用家使用，好讓使用者能便利的快速切換定義過的長寬比例。此外，設置過的「快速鍵」和「裝置比例」也備有匯入及導出的功能，若重灌電腦或更換裝置時，也能方便的回到熟悉的配置手感。

擴充資訊

擴充名稱：Window Resizer
擴充性質：Chrome 免費
功能特性：調整瀏覽器窗口模擬各種屏幕分辨率的寬度 / 高度
附註特點：定義窗口的位置，預設圖標（手機，平板電腦，筆記本電腦，桌上型電腦），支援自訂義尺寸、快捷鍵，備有匯入及導出功能。

需要權限：
讀取及變更您造訪過的網站上的所有資料

功能設置

1. Presets 預設
2. Settings 設置
3. Hotkeys 快速鍵
4. Sync 同步備份及還原
5. History 歷史

操作介紹

Step 1

Presets 預設

安裝「Window Resizer」擴充後，點取 Chrome 工具列的【Window Resizer 圖示】，在跳出的選單中，點擊【Edit presets】或按下鍵盤的快速鍵【E】，開啟「Presets」頁籤

這裡可以看到左側有預設大小共 10 款的裝置可使用，第一個 ( 320 / 480 ) 則對應鍵盤快速鍵【1】，另外我們也可以拖拉其他比例的裝置至目前位置，以改變順位。

(* 預設裝置快速鍵為 0 ~ 9 十組供用家使用 )

右側的 "Add new resolution 添加新的屏幕分辨率" 中，可以添加需要的裝置比例至左側的「快速鍵」選單中。

「Width x Height」選項
在這裡可以使用「Use custom size 自訂義大小」來自訂「寬度 / 高度」值。

而「Use current window size 當前窗口的大小」與「Use current viewport size 當前可視範圍的大小」的差別在於有無加入瀏覽器工具列 ( 包含瀏覽器框架 )，前者有後者無。

「Resize target  Window」選項
若在「Width x Height」選項，使用「Use custom size」自定義大小值的話，那這裡可依「Window 窗口大小」或「Viewport 可視範圍大小」，設定新增裝置的自定義大小值。

「Preset icon」選項
這個選項則是給我們定義新增裝置的裝置圖片

「Position (optional: left/top)」選項
這裡是設定瀏覽器在經由縮放過後所留存的位置，預設為「Leave unchanged」，建議在設定時可以選擇「Center on screen」，這樣較方便觀察經過縮放後的瀏覽器顯示位置。

left / top ( 若在下方點取「Use custom position」，那在此處可以設定瀏覽器經由縮放後，在電腦上顯示的實際位置。)
Leave unchanged 離開不變
Use custom position 使用自定義位置
Use current window position 使用當前窗口的位置
Center on screen 在屏幕中心

「Description (optional)」選項
這個選項，則可以為裝置設定簡易的描述



平常使用 Window Resizer 這個工具除了調試網頁長寬比例大小之外，最常應用的部份就是利用它搭配「PicPick」來做網頁擷圖，這邊可以試著設定一個 ( 640 /480 ) 的大小窗口，並按下【SAVE】儲存設定值

這裡可以看到，在左側 "Manage existing resolutions" 的部份，已經加入了一筆剛才建置的裝置資料且於頁面最下方，將它拖動至第一順位時，預設快速鍵按下【1】即可快速切換瀏覽器至 ( 640 /480 ) 的窗口大小

且瀏覽器經由縮放後會於電腦屏幕的中央呈現，另外點取上頭的【鉛筆圖案】也能重新做編輯的動作，需要刪除則可以按下【X】

Step 2

Settings 設置

在 "Settings" 設置頁面，一般設置過後則不太常會更動到，這邊建議可以勾選「Always center the window」，讓瀏覽器窗口不管是在任何大小的情況下，都會在電腦的中央顯示更改過的屏幕大小。

「Popup menu width」則可以依自己的喜好，選擇按下擴充後彈出式選單的寬度

Step 3

Hotkeys 快速鍵

"Hotkeys" 快速鍵頁面
「Popup specific」選項
提示在擴充「彈出選單」的狀態時，可以使用鍵盤的【向上和向下】箭頭鍵，來選擇建立過或預設的大小裝置，可以使用【0 ~ 9】的數字鍵選取裝置，可以使用【E】鍵開啟「Presets」頁面，【S】鍵開啟「Settings」頁面

「Global shortcuts」選項
提示在全域性的快速鍵中 ( 未彈出選單的情況下 )，按下鍵盤的【Ctrl + 向下鍵】可以「彈出選單」，【Ctrl + Shift + 向下鍵】可以循環設定過的 ( 1 ~ 9 ) 款裝置大小。

另外，由於 Chrome 瀏覽器的限制，開發者可以設置的快捷鍵只有 4個。若在電腦本身就有重複到全域性的快速鍵的狀況下，則可以選擇畫面中的【edit the shortcuts】手動編輯快捷鍵。

來到下圖中的「chrome://extensions/」擴充功能，最有方有「鍵盤快速鍵」可以做全局性的鍵盤熱鍵佈屬

Step 4

Sync 同步備份還原

"Sync" 還原頁面的「Export」區塊可以備份現有的設定值，轉換至其他裝置時則可以用「Import」還原。

Step 5

History 歷史

在 "History" 頁面則記錄當前的擴充版本及曾經變更過的歷史資料，這裡可以看到當前的版本為 ( 1.9.1.0 )

使用心得

在設置時較有疑問的地方應該是 "Presets" 頁面中「Resize target」的「Window」及「Viewport」長寬範圍值

「Window」

「Viewport」

從上面兩個樣張中可以看到「Window」則為包含瀏覽器框架的長寬比，而「Viewport」的部份則以不含瀏覽器框架的長寬做為設定值。

另外，若在 Windows 系統中有將桌面上的工作列移到側邊，那實際在 Window Resizer 上設定的長寬範圍值也會有誤差，這個部份就要特別留意了。

最後，文中介紹的功能中，有些部份非英文直譯，文字狀況則依實際操作體驗而做了較好理解的轉譯情形。

相關文章

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