響應式設計的6個免費測試工具
“別再拖拽拉扯那個瀏覽器了，你快把它弄壞了！”這樣的話你聽過多少次了？好吧，可能不是特別多，但如果你在開發響應式設計的網站，你就知道這意味著什么了：每一次編輯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開發者，我們用的工具當然是越能真正派上用場越好。
你用過上述工具嗎？你怎樣測試你的響應式設計？在評論中告訴大家把。
原文鏈接： Steve Ralston 翻譯： 伯樂在線 - 伯樂在線讀者
