|
響應式網頁應用到浏覽器的方法：
1、測試主流表格因素和浏覽器
如今客戶不僅僅使用iPhone和筆記本，而且使用iMac的27英寸顯示器，10英寸的Kindle和很多平闆設備。這(zhè)些設備可能(néng)會(huì)使用不同的浏覽器，并且每種(zhǒng)表格因素和浏覽器的組合都(dōu)可能(néng)導緻不同的頁面(miàn)渲染。并且這(zhè)些行爲可能(néng)在每個版本上都(dōu)不太一樣。
好(hǎo)消息是浏覽器是免費的。如果你使用Windows平台，可以很容易地安裝主流浏覽器—InternetExplorer、Chrome、Firefox—然後(hòu)可以使用免費工具，比如Browsershots，或者付費工具，比如CrossBrowserTesting，來檢查網頁在Safari上的外觀。如果你使用的是Mac，可以安裝除了InternetExplorer（IE）之外的所有浏覽器--但是可以從Modern.ie上下載IE特定的虛拟機，從而輕松得到幾乎所有版本的IE。
這(zhè)時(shí)，“測試”工作主要是去查看網頁是否渲染正确，浏覽所有的可選項，驗證動态内容是否能(néng)正常加載，看上去是否奇怪，并且執行并驗證程序主邏輯。如果是房屋抵押應用程序，那麼(me)就(jiù)去嘗試新建一個抵押。如果是文字處理程序，就(jiù)嘗試創建一個文檔——并且在測試過(guò)程中檢查用戶界面(miàn)。
我們也提到了平台。需要找出軟件主要的使用者是誰。對(duì)于内部軟件，用戶很可能(néng)會(huì)使用筆記本，手機（Android和iOS），或者平闆。建議購買每種(zhǒng)主要類型的機器作爲測試機型，這(zhè)些費用相比整體開(kāi)發(fā)成(chéng)本而言應該非常小。當測試團隊等待所需的特定移動設備時(shí)，開(kāi)發(fā)團隊很可能(néng)願意分享他們的手機和平闆。
最後(hòu)，考慮是否需要支持舊的浏覽器，可能(néng)是爲了公司客戶，并且在這(zhè)些設備上做程序主邏輯測試。
在此期間，可能(néng)會(huì)發(fā)現可用性問題，第一個圖片顯示的地方不合适，或者頁面(miàn)“感覺”很奇怪。將(jiāng)這(zhè)些發(fā)現分享給團隊。這(zhè)可能(néng)不是個bug，但也可能(néng)是。
2、改變浏覽器大小
基于“響應式内容”的本質，頁面(miàn)應該在任何合理屏幕大小的設備上看上去都(dōu)很舒服，從300*300的手機到2550*1600像素的顯示器。最快最方便的評估響應式功能(néng)的方式是大幅改變浏覽器的大小，檢查顯示情況。
對(duì)于這(zhè)類測試不需要任何搭建時(shí)間。隻需要打開(kāi)網頁，點擊浏覽器的右上角，拖拽到所需的大小。文本是否在你認爲應該在的位置，是否仍然可讀？圖像是否能(néng)合理伸縮？控件是否還(hái)在頁面(miàn)上——按鈕，文本輸入框，日期控件和其他的——是否仍然可用？它們有沒(méi)有遮蓋掉其他重要的内容？
危險之處是你發(fā)現了一個bug，可能(néng)很難重現，産品經(jīng)理會(huì)說(shuō)“沒(méi)有人會(huì)這(zhè)麼(me)快地改變浏覽器尺寸，把它拖拽到整個顯示器上，如果他們真這(zhè)麼(me)做了，那麼(me)應該告訴他們不要這(zhè)麼(me)做。”你可能(néng)會(huì)發(fā)現一堆bug，卻無法說(shuō)服開(kāi)發(fā)人員修複它們。記住：說(shuō)不定就(jiù)有一種(zhǒng)平闆設備有這(zhè)樣的屏幕分辨率。
最新的IE和Chrome版本有工具可以幫助調整浏覽器尺寸到需要的合适大小，比如移動手機或者平闆。如果你在快速改變浏覽器大小時(shí)發(fā)現了一個很難重現的bug，但是可以在一些擁有正常大小的設備上重現這(zhè)個問題，那麼(me)你可能(néng)就(jiù)有了需要修複這(zhè)個問題的有力根據。
3、移動設備和旋轉
移動設備使得響應式網頁設計變得如此重要。移動設備也給響應性帶來了一個新的要求：旋轉。這(zhè)些小型設備會(huì)跟著(zhe)主人去任何地方。這(zhè)些設備也可以随意旋轉，從縱向(xiàng)到橫向(xiàng)再轉回來。這(zhè)似乎和改變大小很類似。但是實際上設備的每次旋轉之後(hòu)，網頁都(dōu)需要重新渲染。
一些應用在改變大小時(shí)可能(néng)會(huì)改變自身行爲--比如，iOS7的計算器，在IPhone4的縱向(xiàng)模式下會(huì)隐藏科學(xué)計算選項。
4、響應式檢查
響應式檢查點的所有描述在網上都(dōu)可以找到。其中的一些很簡單，告訴你在不同的浏覽器尺寸下網頁看上去的樣子。更多複雜的選項，比如BrowserStack，模拟一系列可能(néng)的屏幕尺寸和橫向(xiàng)縱向(xiàng)模式切換能(néng)力的組合。這(zhè)樣的可配置性和模拟尺寸交互的組合可以幫助創建強大的響應式測試環境。
|
