現(xiàn)在很多人是通過智能手機或平板電腦瀏覽網(wǎng)頁，在網(wǎng)頁設(shè)計上就要考量到如何讓不同尺寸屏幕大小也能正常顯示，以往會制作成電腦版和手機版兩種格式，后來多半以響應(yīng)式網(wǎng)頁設(shè)計（Responsive web design）技術(shù)直接在不同尺寸屏幕上顯示最適合的樣式，更重要的是可以節(jié)省維護(hù)的成本和時間。想測試自適應(yīng)設(shè)計在各種設(shè)備顯示情形，除了直接使用手機瀏覽外，其實也有不少工具可以輔助。

本文要介紹的「everysize」可以檢查你的響應(yīng)式網(wǎng)頁在各種尺寸設(shè)備下的顯示效果，操作方式也很簡單，只要輸入要測試的網(wǎng)址就能使用，無需額外下載或安裝軟件，也不需要手動調(diào)整瀏覽器視窗大小。

everysize 內(nèi)設(shè)一些常見的手機、平板電腦顯示器尺寸，例如 iPhone、iPad、Samsung Galaxy、OnePlus、Google Pixel 或是 Bootstrap 各種框架大小，也可以依照需求新增或刪除設(shè)備，將測試畫面拖拽到適當(dāng)位置。和一些只提供截圖的服務(wù)不同，everysize 是以嵌入（iframe）方式讓網(wǎng)頁在特定大小范圍呈現(xiàn)，兼具可直接操作使用的特性。

everysize

網(wǎng)站鏈接：https://everysize.kibalabs.com/

使用教學(xué)

開啟 everysize 輸入要測試的網(wǎng)站網(wǎng)址，點選 Go 開始使用。

預(yù)設(shè)情況下 everysize 會在幾種不同的尺寸顯示網(wǎng)頁，包括大、中、小和一個最小的尺寸范圍，如果要測試的頁面本身已經(jīng)具有自適應(yīng)網(wǎng)頁設(shè)計，就能在不同的屏幕大小顯示出不同的效果，例如最常見的就是選單縮緊、側(cè)邊欄移動到最下方等等。

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

如果你想測試的設(shè)備不在 everysize 列表中，也可以從左上角自定義長寬尺寸進(jìn)行測試。

everysize 很方便的是可依照需求將設(shè)備拖拽到適當(dāng)位置，在測試時就能即時看出不同設(shè)備間可能產(chǎn)生的變化。

前面有提到這個工具不單單只是一個截圖生成器，而是確實在特定范圍顯示網(wǎng)頁，因此可以通過鍵盤鼠標(biāo)直接瀏覽頁面，或是實際操作看看是不是可能產(chǎn)生問題，左上角有個選項能調(diào)整縮放比例，如果屏幕較小或是無法一次塞入這么多設(shè)備也能稍作調(diào)整。

值得一試的三個理由：

• 測試自適應(yīng)網(wǎng)頁設(shè)計在不同設(shè)備的顯示效果
• 內(nèi)設(shè)多種常見的設(shè)備類型，亦可依照需求自定義特定尺寸大小
• 以嵌入方式將網(wǎng)頁直接帶入特定范圍，可通過鼠標(biāo)實際操作測試

更多測試工具：