
因為工作需求我時常需要對螢幕進行擷圖,擷取瀏覽器、應用程式視窗畫面,透過 SizeUp 工具可快速調整視窗大小(SizeUp 不是免費軟體,Spectacle 是功能類似的免費替代方案),不過很難得知實際瀏覽器顯示解析度,如果是開發者或設計師想調整頁面,可能需要設定一個確切的顯示範圍進行更精準測試,接下來要介紹的小工具可以滿足類似需求。
本文要介紹「How Big Is My Browser?」是一個免費的線上工具,只要打開網頁、就會在頁面顯示你目前的瀏覽器可見範圍尺寸,拖曳視窗邊框調整大小,網頁的計算工具會即時更新數值,使用者就能依照需求將瀏覽器調整到特定的寬度、高度,以像素做為單位。
除了在電腦瀏覽器使用,在手機、平板電腦以瀏覽器打開「How Big Is My Browser?」一樣可以測得行動裝置瀏覽器的顯示範圍大小,需要的朋友不妨加入書籤。
How Big Is My Browser?
http://howbigismybrowser.com/
使用教學
STEP 1
開啟「How Big Is My Browser?」網站後上方和左側會出現標尺,中間會顯示瀏覽器可視範圍的寬度和高度像素大小。

STEP 2
依照提示拖曳右下角視窗邊緣調整瀏覽器尺寸,中間的寬度高度數值會即時變化。

STEP 3
無論是在橫式或直式的瀏覽器顯示範圍都能正常計算大小,不過如果視窗太小就會出現調整裝置方向或將瀏覽器放大的提示訊息。


STEP 4
前面有提到「How Big Is My Browser?」網站也可在手機的瀏覽器使用,當透過不同的行動裝置瀏覽器開啟時會看到可視範圍略有差異,如果想測試瀏覽器的尺寸大小只要打開網站即可顯示,非常方便。

值得一試的三個理由:
- 打開「How Big Is My Browser?」會顯示瀏覽器可視範圍尺寸像素
- 拖曳視窗邊緣調整大小,網頁顯示的寬度高度會即時更新
- 也可以在手機、平板電腦等行動裝置使用