[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

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

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

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

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

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_001




擴充資訊

擴充名稱: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」頁籤

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_101



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

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

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_102



右側的 "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】儲存設定值

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_103



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

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_104



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



Step 2

Settings 設置

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

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_201



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



Step 3

Hotkeys 快速鍵

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

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_301



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

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

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

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_302



Step 4

Sync 同步備份還原

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

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_401



Step 5

History 歷史

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

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_501




使用心得

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

「Window」

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_601



「Viewport」

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整器_602



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

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

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



相關文章

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



分享

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *