[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例
Window Resizer 為 Chrome 瀏覽器的擴充外掛工具套件,它能幫助使用者調整瀏覽器視窗,來模擬各種屏幕分辨率的寬度及高度比例大小,方便網站設計開發人員調整瀏覽器及網頁大小,使網站適合在各種行動裝置上呈現,讓訪客有個良好的互動體驗。
現今的智慧型移動設備長寬比例百百款,若要特別為某種機型做特定的寬度調適,想必會很頭疼。有了 Window Resizer 也不用擔心,因為 Window Resizer 除了預建了幾組常用的屏幕響應值外,也支援「自訂義大小」供設計人員方便的幫網站佈局。
另外, Window Resizer 也貼心的內建了「快速鍵」選項供用家使用,好讓使用者能便利的快速切換定義過的長寬比例。此外,設置過的「快速鍵」和「裝置比例」也備有匯入及導出的功能,若重灌電腦或更換裝置時,也能方便的回到熟悉的配置手感。
擴充性質:Chrome 免費
功能特性:調整瀏覽器窗口模擬各種屏幕分辨率的寬度 / 高度
附註特點:定義窗口的位置,預設圖標(手機,平板電腦,筆記本電腦,桌上型電腦),支援自訂義尺寸、快捷鍵,備有匯入及導出功能。
需要權限:
讀取及變更您造訪過的網站上的所有資料
這裡可以看到左側有預設大小共 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】
「Popup menu width」則可以依自己的喜好,選擇按下擴充後彈出式選單的寬度
「Popup specific」選項
提示在擴充「彈出選單」的狀態時,可以使用鍵盤的【向上和向下】箭頭鍵,來選擇建立過或預設的大小裝置,可以使用【0 ~ 9】的數字鍵選取裝置,可以使用【E】鍵開啟「Presets」頁面,【S】鍵開啟「Settings」頁面
「Global shortcuts」選項
提示在全域性的快速鍵中 ( 未彈出選單的情況下 ),按下鍵盤的【Ctrl + 向下鍵】可以「彈出選單」,【Ctrl + Shift + 向下鍵】可以循環設定過的 ( 1 ~ 9 ) 款裝置大小。
另外,由於 Chrome 瀏覽器的限制,開發者可以設置的快捷鍵只有 4個。若在電腦本身就有重複到全域性的快速鍵的狀況下,則可以選擇畫面中的【edit the shortcuts】手動編輯快捷鍵。
來到下圖中的「chrome://extensions/」擴充功能,最有方有「鍵盤快速鍵」可以做全局性的鍵盤熱鍵佈屬
「Window」
「Viewport」
從上面兩個樣張中可以看到「Window」則為包含瀏覽器框架的長寬比,而「Viewport」的部份則以不含瀏覽器框架的長寬做為設定值。
另外,若在 Windows 系統中有將桌面上的工作列移到側邊,那實際在 Window Resizer 上設定的長寬範圍值也會有誤差,這個部份就要特別留意了。
最後,文中介紹的功能中,有些部份非英文直譯,文字狀況則依實際操作體驗而做了較好理解的轉譯情形。
現今的智慧型移動設備長寬比例百百款,若要特別為某種機型做特定的寬度調適,想必會很頭疼。有了 Window Resizer 也不用擔心,因為 Window Resizer 除了預建了幾組常用的屏幕響應值外,也支援「自訂義大小」供設計人員方便的幫網站佈局。
另外, Window Resizer 也貼心的內建了「快速鍵」選項供用家使用,好讓使用者能便利的快速切換定義過的長寬比例。此外,設置過的「快速鍵」和「裝置比例」也備有匯入及導出的功能,若重灌電腦或更換裝置時,也能方便的回到熟悉的配置手感。
擴充資訊
擴充名稱:Window Resizer擴充性質:Chrome 免費
功能特性:調整瀏覽器窗口模擬各種屏幕分辨率的寬度 / 高度
附註特點:定義窗口的位置,預設圖標(手機,平板電腦,筆記本電腦,桌上型電腦),支援自訂義尺寸、快捷鍵,備有匯入及導出功能。
需要權限:
讀取及變更您造訪過的網站上的所有資料
功能設置
- Presets 預設
- Settings 設置
- Hotkeys 快速鍵
- Sync 同步備份及還原
- 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 上設定的長寬範圍值也會有誤差,這個部份就要特別留意了。
最後,文中介紹的功能中,有些部份非英文直譯,文字狀況則依實際操作體驗而做了較好理解的轉譯情形。
留言
張貼留言