Everysize：免費響應式網頁測試工具，多種裝置寬度一頁並排

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

Everysize 是 Kiba Labs 做的免費網頁工具，做的事情很單一：把你輸入的網址放進一堆不同寬度的小視窗裡，在同一個瀏覽器分頁並排顯示，讓你一眼看出自己的網頁在手機、平板與桌面寬度下分別長什麼樣。免安裝、免註冊，打開網站貼上網址就能用。程式碼的提交紀錄最早追溯到 2020 年 4 月，上一次調整則停在 2023 年 8 月。

我實際打開線上版操作了一圈，也把它的原始碼整份拉下來讀過，再加上瀏覽器的連線紀錄對照。結論先講：這個工具的核心功能今天還活著，可以正常嵌入的網址，多寬度並排預覽照常運作；但它周邊的東西壞得差不多了，錯誤提示機制已經失效、裝置清單停在 2020 年、倉庫沒有授權條款，連原本的官網網域都已經沒有可用的 DNS 紀錄（網域不再指向任何伺服器）。把它當測試自己開發中網站的免費小工具可以，把它當可靠的測試基礎建設不行。

打開的第一個畫面，其實是同公司的示範頁

線上版網址是 everysize-app.kibalabs.com。載入後看到的不是空白頁，而是四個排好的視角框，分別對應 Bootstrap 的 lg、md、sm、xs 四個寬度斷點（992、768、576、575 像素），框裡載入的是 everypage 這個網站建立器的官方頁面。這不是隨機挑的示範站：everypage 與 Everysize 同屬 Kiba Labs，工具頁尾那句「用 everypage 做出漂亮的響應式網站」也直接連過去。打開工具第一眼看到的內容，本質上是自家產品的廣告位，只是做得不吵。

Pin

操作動線很短。上方輸入框貼網址、按 GO，全部視角框同步換頁；右下角的加號能新增視角框，每個框的標題列可以從下拉選單挑預設裝置，也能直接改寬度、高度與縮放比例，框跟框之間可以拖曳重排。縮放是顯示層的概念：框的實際寬度不變，畫面等比縮小，預設版面把每個框縮到 40% 顯示，把四個斷點塞進一屏。排好的版面會存在瀏覽器本機的 localStorage，對應的鍵名在原始碼裡寫得明白，下次打開還在；輸入過的網址則會變成網址列上的查詢參數，整條連結可以直接貼給同事，對方打開就會看到同一個測試網址；版面設定仍是對方瀏覽器裡自己那組。整個介面沒有廣告、沒有帳號、沒有付費牆，這部分確實乾淨。

能嵌入的網址照常顯示，被擋的只剩暗框

實測的第一組對照很乾淨。輸入 example.com，四個視角框照常把頁面載進來，縮放與並排都正常，這是 Everysize 的核心價值：一眼比對同一頁在 575、576、768、992 這些寬度下的版面變化，不用一直拖曳調整瀏覽器視窗。

Pin

換成大多數正式環境的網站，結果就不一樣了。我拿本站 techmoon.xyz 測試，四個視角框全部變成深灰色空框，沒有任何內容，也沒有任何提示。查一下 techmoon.xyz 的回應標頭就明白了：它送出 X-Frame-Options 的 SAMEORIGIN 設定，等於明文告訴瀏覽器「這個頁面只準同源網站嵌入」，Everysize 的框架自然什麼都拿不到。原因在下一節還有後續，這裡先記下現象：被擋的網站不會告訴你它被擋了，你只會看到四個安安靜靜的暗框。如果你不知道 iframe 的嵌入規則，第一反應多半是「這工具壞了」，實際上壞的是另一個地方。

Pin

那條永遠不會出現的錯誤提示

Everysize 的原始碼裡其實寫了一個體貼的設計：每當你輸入網址，它會先幫你檢查目標網站有沒有拒絕被嵌入，有的話顯示一段「Oh no! 這個網站不支援 iframe，如果你是開發者，改用 localhost 就一切正常」的提示。這段提示文案至今還在頁面程式碼裡，我在瀏覽器裡也驗證得到它存在於畫面結構中，但它永遠不會顯示出來。

卡住的地方很具體。瀏覽器的連線紀錄顯示，每次輸入網址，這個工具都會把網址 POST 到 api.kiba.dev 這個 Kiba Labs 自家的檢查端點，而這個請求現在固定收到 422 錯誤，伺服器回覆的原因是請求內容格式不符合預期，瀏覽器主控台裡也看得到對應的錯誤訊息，前端拿到後選擇靜默放棄。我用正確的格式直接呼叫同一個端點，拿得到正常的回應，也就是說端點本身還活著，是這份 2023 年打包的前端送出去的格式已經對不上現在的服務規格。檢查這一步一失敗，後面的判斷全部短路，於是提示永遠不會出現，使用者只看得到暗框。

這裡順便補一個背景知識，它決定了這個工具在 2026 年的實用邊界。iframe 是網頁裡再嵌一個網頁的框架，而網站可以用兩種常見方式拒絕被嵌：舊一點的 X-Frame-Options 標頭，新一點的 CSP frame-ancestors 規則。以 WordPress 來說，只有登入頁是核心預設送出拒絕嵌入的標頭，一般前台頁面通常是外掛、主機或 CDN 層加上同類設定，很多正式環境的網站也會這樣做。換句話說，凡是設了拒絕嵌入標頭的公開網站，根本進不了 Everysize 的視角框，這個工具真正能發揮的場景，是測你自己開發中、還沒上線的 localhost 環境，它的錯誤文案其實自己也是這樣寫的。另外，它的檢查邏輯只看 X-Frame-Options，連 CORS（規範網頁能向哪些跨站請求資源的另一套規則）這類間接限制都不管，2026 年的新型擋法它一概認不得。

你輸入的網址，去了兩個地方

README 對這個工具的隱私說法是：一切都在你的瀏覽器裡用 iframe 完成，不必把憑證交給任何下載安裝的應用程式。這句話在「頁面內容」這一層是真的，iframe 直接從目標網站載入，你的帳號密碼確實不經過 Kiba Labs。但原始碼顯示，你輸入的網址字串本身會被送往兩個地方：一個是前面那個 header 檢查端點，另一個是 everyview 這套自家的使用分析服務。事件埋得很細：頁面一打開就回報一次應用開啟，接著回報一次頁面瀏覽；你送出網址，網址本身就是事件內容；新增或關閉視角框各一條事件，換裝置或調縮放比例也各有一條，連縮放數值都跟著送。這些不是推測，是原始碼裡逐行寫著的呼叫。

持平地講，這兩條外送現在都卡在 422，分析服務的連線工作階段也建立不起來，所以網址實際上沒有成功送達任何地方。分析服務的伺服器本身還活著，問題看來單純出在這份凍結的前端身上。但這是運氣，不是承諾。判斷隱私邊界時該看的是程式碼寫了什麼，而不是對方伺服器今天壞沒壞：哪天 Kiba Labs 把後端修好，外送就自動恢復，使用者不會收到任何通知。如果你打算拿它測公司內部或客戶的預上線環境，網址列裡那些不該外流的路徑，在設計上就是會離開你的瀏覽器。同場加映一個誠實的反例，想要「處理過程完全留在瀏覽器」的工具，本站介紹過的 VERT.sh 把轉檔留在本機，Moocup 連截圖都不上傳伺服器，那一類才是把邊界寫進架構裡的做法。

裝置清單停在 2020 年

視角框的下拉選單列了二十八個預設尺寸，從 Bootstrap 五個斷點、1920×1080 的桌面解析度（還附一組少見的直式版本），到 iPhone、Samsung、OnePlus、Pixel 各世代，連 iPhone 2G 這種古董都在清單上。問題是最新的機型是 iPhone 12 Pro Max（428×926）、Galaxy S20 與 Pixel 5，全部是 2020 年下半年的產品，之後就沒有再新增過。對照提交紀錄，最後一次加入裝置是 2020 年 11 月，時間軸對得上。

這件事的實際影響取決於你怎麼用它。響應式設計看的是寬度斷點而非特定手機，Bootstrap 斷點與自訂尺寸今天仍然堪用，這是它還站得住的原因。但如果你想驗收 2026 年主流手機的實際解析度，清單裡找不到，每個尺寸都得手動補；摺疊螢幕與新世代長寬比也全部缺席。工具本身允許你輸入任意寬高，所以這是麻煩，還不到死刑，只是「預設就很齊」的期待要先放下。

沒有授權條款的倉庫，維護停在 2023 年 8 月

倉庫在 GitHub 上公開，但根目錄沒有任何授權條款檔案，GitHub 頁面也顯示授權為 none。這在法律上預設是保留所有權利：原始碼可以看、可以自己照著做一個，但要把它部署成自己的服務或拿去改作商業使用，嚴格說需要先向著作權人取得授權。比較尷尬的是，倉庫裡附了現成的 Dockerfile，看得出當年確實預留了自架這條路，卡的剛好是法律那一關。附帶一提，@kibalabs 的核心與 UI 套件（core、core-react、ui-react）在 npm 上標示 MIT，但負責外送分析的 everyview-tracker 兩個套件同樣未標示任何授權，真正掛保證的只有 Everysize 這層應用程式碼的預設保留權利。

維護狀態用時間軸看最清楚。2020 年 4 月第一批提交，2020 年 11 月最後一次加裝置，2021 到 2022 年只剩相依套件與部署流程的調整，2023 年 8 月 29 日最後一筆提交是把服務搬到新機器，之後就是兩年多的安靜。截至 2026 年 9 月，倉庫約 30 顆星、5 個 fork、零個開啟中的 issue。官網網域 everysize.kibalabs.com 的 DNS 已經沒有可用紀錄，README 裡的示範圖檔也因此是死連結，README 自己寫的「試試看」連結還是通的。Kiba Labs 這家公司現在的主力是前面提到的網站建立器 everypage，公司官網的頁面產生標記顯示就是用它自己的產品蓋的，Everysize 比較像產品線旁邊留下的免費小工具。

限制講完，剩下哪些場景還值得打開它

先把它的邊界說清楚：跨瀏覽器的行為差異它不涵蓋，422 從何時開始也無法從外部回推，能確認的只有今天如此。加上前面各節的事實，這個工具的限制可以列得很具體：公開網站大多進不來、錯誤提示已死、裝置清單過時、無授權條款、網址在設計上會外送、單一公司維護且已兩年未動。

跟替代方案擺在一起，位置就清楚了。Chrome 內建的開發者工具就有裝置模式，單一視口模擬更完整，還能同時看網路請求與主控台訊息，缺的只是「多寬度並排」這一件事。想要開源且持續維護的同型工具，Responsively App 是明確選項，同樣做多裝置並排預覽，AGPL-3.0 授權，截至 2026 年 9 月累積超過兩萬五千顆星且當月仍有提交活動，社群規模是 Everysize 的數百倍。跨瀏覽器與真實裝置的相容性測試，本站介紹過的 LambdaTest 走的是雲端真機路線，跟本地預覽是不同層次的需求。而在「上線前看一眼社群預覽」這個鄰近場景，metatags.io 值得一起認識。

所以判斷是這樣：你正在開發自己的網站，想要一個零安裝的多寬度並排檢查器，測的是 localhost 或你自己控制、願意拆掉嵌入限制的環境，Everysize 今天仍然堪用，把常用尺寸排好存下來，它就是個稱職的免費小鏡子。你的需求是測公開網站、驗收新裝置解析度，或把工具納入長期流程，那就把時間花在 Responsively App 或開發者工具上。Everysize 最準確的定位是：一個還亮著燈的 2020 年時間膠囊，核心的一面鏡子沒碎，旁邊的零件已經停擺，用它照鏡子可以，別把整棟房子押在它身上。