everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果

最後更新於 2020 年 07 月 07 日

現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive ViewerScreenDump 或是 Responsive Screenshots

本文要介紹的「everysize」和前面幾款工具很像,可以檢查你的響應式網頁在各種尺寸裝置下的顯示效果,操作方式也很簡單,只要輸入要測試的網址就能使用,無需額外下載或安裝軟體,也不需要手動調整瀏覽器視窗大小。

everysize 內建一些常見的手機、平板電腦顯示器尺寸,例如 iPhone、iPad、Samsung Galaxy、OnePlus、Google Pixel 或是 Bootstrap 各種框架大小,也可以依照需求新增或刪除裝置,將測試畫面拖曳到適當位置。和一些只提供擷圖的服務不同,everysize 是以嵌入(iframe)方式讓網頁在特定大小範圍呈現,兼具可直接操作使用的特性。

everysize
https://everysize.kibalabs.com/

使用教學

STEP 1

開啟 everysize 輸入要測試的網站網址,點選 Go 開始使用。

STEP 2

預設情況下 everysize 會在幾種不同的尺寸顯示網頁,包括大、中、小和一個最小的尺寸範圍,如果要測試的頁面本身已經具有自適應網頁設計,就能在不同的螢幕大小顯示出不同的效果,例如最常見的就是選單縮緊、側邊欄移動到最下方等等。

STEP 3

從每個預覽畫面左上角可選擇要帶入的裝置尺寸,像是比較新的 iPhone 11 Pro 或是 iPad Pro 都能夠找到,也有 Samsung Galaxy、One Plus 和 Google Pixel 4 等大小。

如果你想測試的裝置不在 everysize 列表中,也可以從左上角自訂長寬尺寸進行測試。

STEP 4

everysize 很方便的是可依照需求將裝置拖曳到適當位置,在測試時就能即時看出不同裝置間可能產生的變化。

前面有提到這個工具不單單只是一個擷圖產生器,而是確實在特定範圍顯示網頁,因此可以透過鍵盤滑鼠直接瀏覽頁面,或是實際操作看看是不是可能產生問題,左上角有個選項能調整縮放比例,如果螢幕較小或是無法一次塞入這個多裝置也能稍作調整。

值得一試的三個理由:

  1. 測試自適應網頁設計在不同裝置的顯示效果
  2. 內建多種常見的裝置類型,亦可依照需求自訂特定尺寸大小
  3. 以嵌入方式將網頁直接帶入特定範圍,可透過滑鼠實際操作測試

 

相關的文章

Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌(Chrome 擴充功能)

如果要讓行動裝置正常瀏覽網頁,可以另外製作手機版頁面或是透過自適應網頁設計(Responsive Web Design,簡稱 RWD)技術來調整版型,那麼要怎麼知道一個網站有沒有支援 RWD 呢?最簡單的方法就是拖曳調整視窗大小,看看網頁是不是在寬度較窄時仍可正常顯示,例如選單可能會縮起變成點選後才展開的按鈕。大部分的開發者都會使用行動裝置測試版型,但每個裝置大小都有差異,若沒辦法同時擁有這麼多裝置進行測試,其實透過一些電腦上的工具也能達到相同效果。

Screenshot Tracker 擷取並追蹤網頁長截圖,測試在不同裝置顯示情形

網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌,以前會針對行動裝置另外製作一個行動版,現在比較普遍作法是使用響應式網頁設計(Responsive web design,簡稱 RWD),可自動調整為最適合閱讀的大小,但這些開發過程可能都得借助於測試工具幫忙,例如瀏覽器外掛程式 Responsive Viewer 可在單一頁面查看不同螢幕大小裝置的顯示樣式,或是透過線上工具 ScreenDump 預覽網站在不同尺寸螢幕顯示效果。

Qurb 線上 Mockup 產生器,擷圖套用 iPhone、MacBook 外框更有質感

擷取網頁或應用程式畫面並不困難,除了使用內建的螢幕擷取工具,也有很多擷圖軟體可以選擇,像是 WinSnap、FastStone Capture 或是 Mac 上的 TechSmith Screenshot 等等軟體,當然擷圖軟體可以提供更多更細部的功能和選項,但內建就好在速度快與操作方便性了吧!後來使用 Mac 內建的擷取工具習慣後我就捨棄其他第三方應用程式,除非需要用到劃線、標記或處理特定部分才會使用 Skitch(馬賽克的話則是使用 Redacted)。

ScreenDump 自適應網頁設計測試工具,預覽網站在不同尺寸螢幕顯示效果

早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題,都會針對 User Agent 提供不同的頁面版本,例如在手機存取時會直接切換到「行動版」網頁,若以電腦開啟則是跳轉一般網頁,這麼做的好處是一般行動裝置會使用速度較慢的行動網路,行動版就能盡量減少網頁大小,讓瀏覽者有更好的使用體驗,不過缺點也顯而易見,就是得同時維護網頁不同版本,無形間增加更多時間成本。

Networks.bio 將社群網站整合為單一網址,充分利用你的 IG 頁面進行曝光

以前覺得每個人都應該要有一個自己的個人部落格,寫寫生活或是放上自我介紹,後來開始有網路名片,可以將大頭貼、自我介紹和相關鏈結整合在單一頁面上,有些服務在付費後還能夠自訂網域名稱(Custom Domain Names),對於要建立網路形象來說非常有用。不過這些功能後來逐漸被 Facebook、Twitter 和 LinkedIn 等社群網站取代,現在出現在名片上的可能不是個人網站網址而是社群鏈結。

回應