【感謝@Hacker_YHJ 的熱心翻譯。如果其他朋友也有不錯的原創或譯文，可以嘗試推薦給伯樂線上。】
“別再拖拽拉扯那個瀏覽器了，你快把它弄壞了！”這樣的話你聽過多少次了？好吧，可能不是特別多，但如果你在開發響應式設計的網站，你就知道這意味著什麼了：每一次編輯DOM和CSS之後，你都要拽著瀏覽器的邊緣拉拉扯扯，來測試你的編輯結果以及檢查是否有什麼東西故障了。
（伯樂線上補充：CSS 就是被這樣玩爛了！！！ 圖由@老碼農的自留地 推薦）
歸根結底，大部分的努力都是為了適應不同裝置的螢幕尺寸。
如果你給公司做開發，公司可能會給出各種各樣的裝置來測試。在我自己工作的地方，我們就用到了iPad，iPod和其他一兩個平板電腦，筆記本或者桌上型電腦。如果沒那麼奢侈，那就只好用手邊的裝置來測試了。
在我家裡，我們有兩個不同的筆記本，兩個不同的安卓裝置，一個Kindle和一個Nexus 7。這些都是我曾用來測試我自由開發專案的裝置，不過，這顯然不能算是一個面面俱到的組合。首先，這裡面根本就沒有iOS裝置，其次雖然我是一個早期採用者，（譯者注：最先採用新科技的人。）我也沒打算買任何新的衝擊市場的手機或者平板裝置。
因此，作為開發者應該怎麼辦呢？幸好，現在有許多基於瀏覽器的工具能夠模擬多種裝置的螢幕尺寸，其數量還在不斷增長。當然，不同的工具有不同的特性和不同級別的功能。在此我們將會討論其中幾個。
出於測試的需要，我使用我自己寫的第一個真正的響應式網站，PajamasOnYourFeet.com。這個網站基於Brownie HTML5 template，對EGrappler上的開發者社群，它十分慷慨的提供免費支援。
Am I Responsive?
Am I Responsive?是一個如此簡單的即時檢視，它提供四種不同的裝置來顯示你的網站。四種裝置都是iOS系統的，開發者解釋說這正是這個網站所關注的。網站沒有提供控制和選擇，這只是一個簡單、優雅的展現方式。
視區大小有：
- 桌上型電腦——1600×992畫素，縮小到原大小的0.3181倍
- 筆記本——1280×802畫素，縮小到原大小的0.277倍
- 平板電腦——768×1024畫素，縮小到原大小的0.219倍
- 手機——320×480畫素，縮小到原大小的0.219倍
引用一下這位開發者的所言，”這不是一個用來測試的工具，在真實的裝置上測試是相當重要的。事實上對我來說，這是一個用於快速抓屏，或者在使用者會議上讓人們從視覺上了解到你的意圖的工具。”
它有兩個非常好的特性：能夠抓起”裝置“並放在螢幕上的任意地方，以及能夠將你的測試網站嵌入一個可分享的連結中。在火狐中，至少在現在測試網站的結構下，iPone上的側邊滾動欄不會顯示，而在IE和Chrome中則會顯示。
deviceponsive
deviceponsive與Am I Responsive?非常相似，它們都簡單明瞭的展示了你的網站，而且對裝置而言，都沒有可見的控制和選項。所有裝置在一頁長網頁上同時顯示。你能夠通過改變背景顏色和嵌入你自己的logo來定製這個網站的頁首，之後截圖分享出去，這十分有趣。從某種方式來說，當你向顧客分享你的截圖的時候，也就幫這個網站打了廣告。
該網站所提供裝置及其螢幕大小： Macbook——1280×800 iPad portrait——768×1024 iPad landscape——1024×768 Kindle portrait——600×1024 Kindle landscape——1024×600 iPhone portrait——320×480 iPhone landscape——480×320 Galasy portrait——240×320 * Galaxy landscape——320×240
使用這些工具時，大部分情況下，滑動條會在較小的裝置上顯示。然而在實際的裝置上，滑動條不會顯示。不過為了測試試圖能在不支援觸控的裝置上也能滑動，必須要做出一些讓步。
responsive test
跟deviceponsive一樣，responsive test用各種不同的裝置顯示你的網頁。不過，跟deviceponsive將所有裝置同時顯示不同，它通過頁面頂部一個簡單的選單來讓你自己選擇要顯示的裝置。我用一箇中等大小的筆記本訪問該網站，頁面縮放能夠正常工作，這能讓我們在裝置的限制框中看到整個測試網站。
這兒提供了十三種不同的視區，涵蓋了從大型桌上型電腦顯示器到被稱為”糟糕的安卓機“（說句公道話，它們還有另外一個名字叫”更好的安卓機“）的機型。
在這個網頁上，火狐又有些蹩腳。注意到這張截圖，在綠色的頁首和白色背景的內容中間只有藍色的條帶，那兒本來應該顯示影象拖動條的。
responsive.js
它與前面的例子非常相似，不過有兩點不同，responsive.js利用流暢的動畫效果來表現從一種裝置到下一種的變化，再者，他用被半透明覆蓋的方式表示網頁在視區之外的部分。
這兒，唯一可選的裝置是自動，它會填滿你的瀏覽器視窗，效果就跟真正訪問那個網站一樣。臺式電腦、平板電腦（水平）、平板電腦（豎直）、智慧手機（水平）以及智慧手機（豎直）這些顯示解析度都沒有提供。
Screenqueries
與之前相同，一些細微的特性和選項似的Screenqueries稍稍不同於之前的工具。它提供了14種手機和12種平板裝置，並且能夠單獨控制切換水平和豎直模式。它們在有編號的畫素網格上顯示，解析度就寫在右下角。顯示時，邊框是可拉動的，因此你也可以定製大小。滑鼠單機或者放在測試區域會使得背景切換為灰色，這讓你覺得看上去不那麼雜亂。
對於很多該網站的裝置，都有一個”Trueview“選項，它將你的測試網站用一個指定的裝置瀏覽器視窗顯示。這是一個非常有意思的特性。
非常不幸，火狐不能顯示這個網站的影象滑動條，對此我已經習慣了。不要責怪我，事實上，火狐是我優先使用的瀏覽器，幸好我們還有其他選擇。
Screenfly
Screenfly 實實在在提升了可用係數。它提供九種比平板更大的裝置，從10寸的筆記本到24寸的臺式電腦都有，此外還包括五種平板，九種手機，三種電視，還能夠自己定製大小。通過另一個控制器，任何選取的裝置都能被旋轉成水平或者豎直的。你能夠選擇是否允許滾動，你還能生成一個可用於分享的連結，只需要點一個按鈕就行。
這個網站顯示解析度的方式非常十分有益。每一個在選單中的裝置都顯示了名稱和解析度，瀏覽器的實際解析度在接近右上角的地方，被選中的裝置的解析度則在展示區域的頁尾，跟測試網站的URL寫在一起。這一個小細節在文件截圖和給客戶分享資訊時給人非常好的感覺。
之前提到的這些足以使它成為一個完美的工具，但Screenfly的開發者還為它升級了代理伺服器的特性，並認為非常合適。用寫網站上的話來說，”Screenfly能使用一個代理伺服器，在你訪問你的網站時偽裝成其他裝置。代理伺服器模仿你所選擇的裝置的使用者代理字串，而不是該裝置的行為。”
對於其他所有工具，處理這個地方時都僅僅是利用CSS。Screenfly是唯一一個允許基於代理字串來測試的。
我給一個我自己寫的，提供了手機版本的網頁做了基於代理字串的測試，手機版網頁的結果非常好。所有效果都跟我想的一樣，所有功能也都能通過測試。測試代理字串是保守的，這一點無可否認，不過這個網站就是這樣保守的風格，而且代理伺服器的特性也的確給網站帶來了好處。
總結
總之，我們看過了不少這些測試響應式設計的資源。它們各有千秋，具體使用哪一個還是取決於你自己的需求和偏好。我鼓勵你們去嘗試和體會一下這些工具。作為Web開發者，我們用的工具當然是越能真正派上用場越好。
你用過上述工具嗎？你怎樣測試你的響應式設計？在評論中告訴大家把。