響應(yīng)式設(shè)計(jì)的6個(gè)免費(fèi)測(cè)試工具
“別再拖拽拉扯那個(gè)瀏覽器了，你快把它弄壞了！”這樣的話你聽過多少次了？好吧，可能不是特別多，但如果你在開發(fā)響應(yīng)式設(shè)計(jì)的網(wǎng)站，你就知道這意味著什么了：每一次編輯DOM和CSS之后，你都要拽著瀏覽器的邊緣拉拉扯扯，來測(cè)試你的編輯結(jié)果以及檢查是否有什么東西故障了。
CSS 就是被這樣玩爛了?。。?圖由@老碼農(nóng)的自留地 推薦
歸根結(jié)底，大部分的努力都是為了適應(yīng)不同設(shè)備的屏幕尺寸。
如果你給公司做開發(fā)，公司可能會(huì)給出各種各樣的設(shè)備來測(cè)試。在我自己工作的地方，我們就用到了iPad，iPod和其他一兩個(gè)平板電腦，筆記本或者臺(tái)式機(jī)。如果沒那么奢侈，那就只好用手邊的設(shè)備來測(cè)試了。
在我家里，我們有兩個(gè)不同的筆記本，兩個(gè)不同的安卓設(shè)備，一個(gè)Kindle和一個(gè)Nexus 7。這些都是我曾用來測(cè)試我自由開發(fā)項(xiàng)目的設(shè)備，不過，這顯然不能算是一個(gè)面面俱到的組合。首先，這里面根本就沒有iOS設(shè)備，其次雖然我是一個(gè)早期采用者，（譯者注：最先采用新科技的人。）我也沒打算買任何新的沖擊市場(chǎng)的手機(jī)或者平板設(shè)備。
因此，作為開發(fā)者應(yīng)該怎么辦呢？幸好，現(xiàn)在有許多基于瀏覽器的工具能夠模擬多種設(shè)備的屏幕尺寸，其數(shù)量還在不斷增長(zhǎng)。當(dāng)然，不同的工具有不同的特性和不同級(jí)別的功能。在此我們將會(huì)討論其中幾個(gè)。
出于測(cè)試的需要，我使用我自己寫的第一個(gè)真正的響應(yīng)式網(wǎng)站，PajamasOnYourFeet.com。這個(gè)網(wǎng)站基于Brownie HTML5 template，對(duì)EGrappler上的開發(fā)者社區(qū)，它十分慷慨的提供免費(fèi)支持。
Am I Responsive?
Am I Responsive?是一個(gè)如此簡(jiǎn)單的即時(shí)視圖，它提供四種不同的設(shè)備來顯示你的網(wǎng)站。四種設(shè)備都是iOS系統(tǒng)的，開發(fā)者解釋說這正是這個(gè)網(wǎng)站所關(guān)注的。網(wǎng)站沒有提供控制和選擇，這只是一個(gè)簡(jiǎn)單、優(yōu)雅的展現(xiàn)方式。
視區(qū)大小有：
- 臺(tái)式機(jī)——1600×992像素，縮小到原大小的0.3181倍
- 筆記本——1280×802像素，縮小到原大小的0.277倍
- 平板電腦——768×1024像素，縮小到原大小的0.219倍
- 手機(jī)——320×480像素，縮小到原大小的0.219倍
引用一下這位開發(fā)者的所言，”這不是一個(gè)用來測(cè)試的工具，在真實(shí)的設(shè)備上測(cè)試是相當(dāng)重要的。事實(shí)上對(duì)我來說，這是一個(gè)用于快速抓屏，或者在用戶會(huì)議上讓人們從視覺上了解到你的意圖的工具。”
它有兩個(gè)非常好的特性：能夠抓起”設(shè)備“并放在屏幕上的任意地方，以及能夠?qū)⒛愕臏y(cè)試網(wǎng)站嵌入一個(gè)可分享的鏈接中。在火狐中，至少在現(xiàn)在測(cè)試網(wǎng)站的結(jié)構(gòu)下，iPone上的側(cè)邊滾動(dòng)欄不會(huì)顯示，而在IE和Chrome中則會(huì)顯示。
deviceponsive
deviceponsive與Am I Responsive?非常相似，它們都簡(jiǎn)單明了的展示了你的網(wǎng)站，而且對(duì)設(shè)備而言，都沒有可見的控制和選項(xiàng)。所有設(shè)備在一頁長(zhǎng)網(wǎng)頁上同時(shí)顯示。你能夠通過改變背景顏色和嵌入你自己的logo來定制這個(gè)網(wǎng)站的頁眉，之后截屏分享出去，這十分有趣。從某種方式來說，當(dāng)你向顧客分享你的截屏的時(shí)候，也就幫這個(gè)網(wǎng)站打了廣告。
該網(wǎng)站所提供設(shè)備及其屏幕大?。?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
使用這些工具時(shí)，大部分情況下，滑動(dòng)條會(huì)在較小的設(shè)備上顯示。然而在實(shí)際的設(shè)備上，滑動(dòng)條不會(huì)顯示。不過為了測(cè)試試圖能在不支持觸控的設(shè)備上也能滑動(dòng)，必須要做出一些讓步。
responsive test
跟deviceponsive一樣，responsive test用各種不同的設(shè)備顯示你的網(wǎng)頁。不過，跟deviceponsive將所有設(shè)備同時(shí)顯示不同，它通過頁面頂部一個(gè)簡(jiǎn)單的菜單來讓你自己選擇要顯示的設(shè)備。我用一個(gè)中等大小的筆記本訪問該網(wǎng)站，頁面縮放能夠正常工作，這能讓我們?cè)谠O(shè)備的限制框中看到整個(gè)測(cè)試網(wǎng)站。
這兒提供了十三種不同的視區(qū)，涵蓋了從大型臺(tái)式機(jī)顯示器到被稱為”糟糕的安卓機(jī)“（說句公道話，它們還有另外一個(gè)名字叫”更好的安卓機(jī)“）的機(jī)型。
在這個(gè)網(wǎng)頁上，火狐又有些蹩腳。注意到這張截屏，在綠色的頁眉和白色背景的內(nèi)容中間只有藍(lán)色的條帶，那兒本來應(yīng)該顯示圖像拖動(dòng)條的。
responsive.js
它與前面的例子非常相似，不過有兩點(diǎn)不同，responsive.js利用流暢的動(dòng)畫效果來表現(xiàn)從一種設(shè)備到下一種的變化，再者，他用被半透明覆蓋的方式表示網(wǎng)頁在視區(qū)之外的部分。
這兒，唯一可選的設(shè)備是自動(dòng)，它會(huì)填滿你的瀏覽器窗口，效果就跟真正訪問那個(gè)網(wǎng)站一樣。臺(tái)式電腦、平板電腦（水平）、平板電腦（豎直）、智能手機(jī)（水平）以及智能手機(jī)（豎直）這些顯示分辨率都沒有提供。
Screenqueries
與之前相同，一些細(xì)微的特性和選項(xiàng)似的Screenqueries稍稍不同于之前的工具。它提供了14種手機(jī)和12種平板設(shè)備，并且能夠單獨(dú)控制切換水平和豎直模式。它們?cè)谟芯幪?hào)的像素網(wǎng)格上顯示，分辨率就寫在右下角。顯示時(shí)，邊框是可拉動(dòng)的，因此你也可以定制大小。鼠標(biāo)單機(jī)或者放在測(cè)試區(qū)域會(huì)使得背景切換為灰色，這讓你覺得看上去不那么雜亂。
對(duì)于很多該網(wǎng)站的設(shè)備，都有一個(gè)”Trueview“選項(xiàng)，它將你的測(cè)試網(wǎng)站用一個(gè)指定的設(shè)備瀏覽器窗口顯示。這是一個(gè)非常有意思的特性。
非常不幸，火狐不能顯示這個(gè)網(wǎng)站的圖像滑動(dòng)條，對(duì)此我已經(jīng)習(xí)慣了。不要責(zé)怪我，事實(shí)上，火狐是我優(yōu)先使用的瀏覽器，幸好我們還有其他選擇。
Screenfly
Screenfly 實(shí)實(shí)在在提升了可用系數(shù)。它提供九種比平板更大的設(shè)備，從10寸的筆記本到24寸的臺(tái)式電腦都有，此外還包括五種平板，九種手機(jī)，三種電視，還能夠自己定制大小。通過另一個(gè)控制器，任何選取的設(shè)備都能被旋轉(zhuǎn)成水平或者豎直的。你能夠選擇是否允許滾動(dòng)，你還能生成一個(gè)可用于分享的鏈接，只需要點(diǎn)一個(gè)按鈕就行。
這個(gè)網(wǎng)站顯示分辨率的方式非常十分有益。每一個(gè)在菜單中的設(shè)備都顯示了名稱和分辨率，瀏覽器的實(shí)際分辨率在接近右上角的地方，被選中的設(shè)備的分辨率則在展示區(qū)域的頁腳，跟測(cè)試網(wǎng)站的URL寫在一起。這一個(gè)小細(xì)節(jié)在文檔截圖和給客戶分享信息時(shí)給人非常好的感覺。
之前提到的這些足以使它成為一個(gè)完美的工具，但Screenfly的開發(fā)者還為它升級(jí)了代理服務(wù)器的特性，并認(rèn)為非常合適。用寫網(wǎng)站上的話來說，”Screenfly能使用一個(gè)代理服務(wù)器，在你訪問你的網(wǎng)站時(shí)偽裝成其他設(shè)備。代理服務(wù)器模仿你所選擇的設(shè)備的用戶代理字符串，而不是該設(shè)備的行為。”
對(duì)于其他所有工具，處理這個(gè)地方時(shí)都僅僅是利用CSS。Screenfly是唯一一個(gè)允許基于代理字符串來測(cè)試的。
我給一個(gè)我自己寫的，提供了手機(jī)版本的網(wǎng)頁做了基于代理字符串的測(cè)試，手機(jī)版網(wǎng)頁的結(jié)果非常好。所有效果都跟我想的一樣，所有功能也都能通過測(cè)試。測(cè)試代理字符串是保守的，這一點(diǎn)無可否認(rèn)，不過這個(gè)網(wǎng)站就是這樣保守的風(fēng)格，而且代理服務(wù)器的特性也的確給網(wǎng)站帶來了好處。
總結(jié)
總之，我們看過了不少這些測(cè)試響應(yīng)式設(shè)計(jì)的資源。它們各有千秋，具體使用哪一個(gè)還是取決于你自己的需求和偏好。我鼓勵(lì)你們?nèi)L試和體會(huì)一下這些工具。作為Web開發(fā)者，我們用的工具當(dāng)然是越能真正派上用場(chǎng)越好。
你用過上述工具嗎？你怎樣測(cè)試你的響應(yīng)式設(shè)計(jì)？在評(píng)論中告訴大家把。
原文鏈接： Steve Ralston 翻譯： 伯樂在線 - 伯樂在線讀者
