Window Resizer 工具介紹 – 縮放瀏覽器視窗比例檢查網頁排版

Window Resizer 工具介紹

Window Resizer 工具介紹 :

1. Window Resizer 安裝及功能介紹

2. Window Resizer 使用教學

Window Resizer 工具介紹 若需要在不同尺寸螢幕上檢視網頁的排版,手邊又沒有那麼多的不同尺寸螢幕的裝置,又不太理解如何調解析度時,就可以使用本篇教學推薦的工具:Window Resizer ,這是可以在 Google Chrome 瀏覽器安裝的擴充功能,最主要是可以模擬不同解析度的視窗尺寸,除了預設了幾組常用的尺寸外,也支援「自定義大小」讓網站管理員直接以調整視窗比例的方式來模擬網站在不同裝置螢幕上的畫面,假如說今天網站主力銷售客群是以智慧型手機上網為主,就可以使用不同比例的大小來查看網站在各家廠牌手機中的排版樣式,對開發者而言是相當實用的工具。

Window Resizer官方下載網站:https://coolx10.com/window-resizer/

• Window Resizer安裝及功能介紹

第一步:進入官網點選Get it from the Chrome Web Store,進入Chrome 線上應用程式商店點選『加到Chrome』。

Window Resizer工具介紹

第二步:安裝完畢後在網址列右側會出現Windows Resizer圖示,除了預設的尺寸外, 也可在下方直接輸入調整的尺寸。

Window Resizer工具介紹

第三步:功能介紹 – 點選Windows Resizer視窗內的設定圖示,一共有四個設置功能可供使用,下面步驟將逐一介紹。

Window Resizer工具介紹

第四步:preaets 預設。

Window Resizer工具介紹

第五步:setting popup 主要是些調整圖示、背景深淺的功能。

Window Resizer工具介紹

第六步:setting-tooltip 調整顯示視窗大小。

Window Resizer工具介紹

第七步:setting-other 調整視窗位置。

Window Resizer工具介紹

第八步:hotkeys 熱鍵,這裡除了可以更改預設尺寸的快捷鍵外,也可以設定基本設定的快捷鍵。

Window Resizer工具介紹

第九步:hotkeys-popup 彈出窗又包含兩個主要區域: “預設和工具” 區域和 “快速調整大小”。可以使用 Tab 鍵或 Shift + Tab 鍵盤快捷鍵在它們之間切換。

Window Resizer工具介紹

第十步: sync 可以開啟同步功能,這樣若你在不同的電腦上使用 Google Chrome 也可以保有原本的設定,讓使用上更方便。

Window Resizer工具介紹

• Window Resizer 使用教學

以上設定設置好後,就可以開始來使用Window Resizer擴充功能囉!

結語:

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

架站資源相關教學文章:

Fontface Ninja 介紹 – Chrome 快速查看網頁字體與字型大小樣式

Mac 預覽程式教學 – 圖片去背、裁切、轉檔及修改註解

Mac 截圖教學 – 螢幕快照內建基本設定與操作示範圖解

網頁設計配色分享介紹(一)- LOL Color 與 NIPPON COLORS

ScreenTray 截圖工具 – 比作業系統內建截圖更有效率的截圖神器

網頁視覺設計 – 以貝茲曲線網站 10 種字母測驗圓弧圖是否完美

網站架設知識推薦閱讀:

Site Kit WordPress Plugin – Google SEO 整合工具外掛介紹

Google 搜尋 新增簡易指令:before: & after 快速篩選搜尋結果

Chrome 移除蓋版廣告?Google 12 項廣告體驗規範簡易說明

 

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top