jizz中国jizz免费,国语自产拍精品香蕉在线播放,日韩高清一区

用Google Chrome移動(dòng)模擬工具做更好的響應(yīng)式設(shè)計(jì)

原創(chuàng)|使用教程|編輯：龔雪|2014-12-17 10:04:55.000|閱讀 3094 次

概述：用Google Chrome移動(dòng)模擬工具做更好的響應(yīng)式設(shè)計(jì)：我們的網(wǎng)站、應(yīng)用程序要怎樣才能在各式各樣的移動(dòng)設(shè)備中有更好的響應(yīng)式設(shè)計(jì)呈現(xiàn)效果？我們是不是需要在每一臺(tái)移動(dòng)設(shè)備中測(cè)試？使用Google Chrome仿真移動(dòng)模擬器，對(duì)每個(gè)移動(dòng)設(shè)備進(jìn)行模擬，可以達(dá)到事半功倍的效果。開(kāi)發(fā)者們，還等什么呢，讓我們一起體驗(yàn)Google Chrome移動(dòng)模擬器的強(qiáng)大功能吧。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

Google Chrome移動(dòng)端模擬

Chrome 32 發(fā)布以后，開(kāi)發(fā)者工具中新增了一個(gè)新工具——mobile emulation。這個(gè)工具絕對(duì)是為移動(dòng)設(shè)備響應(yīng)式設(shè)計(jì)測(cè)試而生的。

如果你還沒(méi)有打開(kāi)該工具,那么請(qǐng)跟隨一下步驟：

按F12(或者Cmd+Alt+l on a Mac)
點(diǎn)擊Developer Tools under View -> Developer
右鍵網(wǎng)頁(yè)，點(diǎn)擊Inspect Element

在開(kāi)發(fā)者工具的最上面，會(huì)看到一個(gè)像手機(jī)的新按鈕。點(diǎn)擊它開(kāi)啟移動(dòng)模擬模式。如下圖：

你可以看到開(kāi)發(fā)者工具正常工作，但是有附加選項(xiàng)，網(wǎng)站被渲染成移動(dòng)設(shè)備模擬狀態(tài)。

設(shè)備設(shè)置

在左上角，設(shè)備設(shè)置選項(xiàng)中有46個(gè)移動(dòng)設(shè)備可供模擬，你可以設(shè)置以下內(nèi)容：

屏幕分辨率
橫向和縱向旋轉(zhuǎn)
設(shè)置像素比
在可視化區(qū)域縮放、全屏操作

網(wǎng)絡(luò)設(shè)置

接下來(lái)是旁邊的藍(lán)色字體部分，網(wǎng)絡(luò)設(shè)置。我們可以設(shè)置網(wǎng)路速度offline 到 no throttling，可以幫助我們觀察網(wǎng)站加載速度快慢。

network下，我們可以手動(dòng)設(shè)置代理，可以觀察網(wǎng)站反映速度。

斷點(diǎn)

斷點(diǎn)怎么辦？工具會(huì)自動(dòng)檢查CSS設(shè)置中的斷點(diǎn)，并給每一個(gè)斷點(diǎn)提供鏈接。

你也可以模擬硬件感應(yīng)裝置，包括：觸控輸入、地理定位、加速計(jì)等。

Usersnap Extension

完成上面的步驟，可很輕松模擬移動(dòng)設(shè)備。不過(guò)還未完。

在不同情況下網(wǎng)站渲染情況如何？需要我們繼續(xù)模擬。然后，如何將信息分享給開(kāi)發(fā)者和設(shè)計(jì)者呢？

Usersnap Chrome擴(kuò)展和開(kāi)發(fā)者工具良好融合，使用 Usersnap Widget ，你可以添加屏幕注釋兼容性報(bào)告，并使用移動(dòng)模擬插件，將他應(yīng)用到設(shè)置區(qū)域。

如果你沒(méi)有使用Usersnap，你可以在 Chrome Web Store中下載安裝。安裝后在工具欄中可以看到Usersnap圖標(biāo)。第一次使用，需要激活。

點(diǎn)擊"OK"，然后登陸，就可以進(jìn)入工具設(shè)置頁(yè)面。在頁(yè)面底部可以看到自己的項(xiàng)目。如圖：

Google Chrome移動(dòng)端模擬-Usersnap Extension

選擇項(xiàng)目，點(diǎn)擊Select Project，你就可以使用工具了。回到移動(dòng)模擬工具插件，我發(fā)現(xiàn)但頁(yè)面達(dá)到768px斷點(diǎn)，就會(huì)停止渲染。

因此，我想讓我的團(tuán)隊(duì)知道這個(gè)問(wèn)題，然后我可以修復(fù)它。點(diǎn)擊Usersnap按鈕，出現(xiàn)對(duì)話(huà)框，添加評(píng)論、高亮、注釋、規(guī)則等內(nèi)容。

你可以在上圖中看到，我向我的團(tuán)隊(duì)發(fā)送的信息，網(wǎng)站外觀、網(wǎng)站在移動(dòng)設(shè)備中正常工作所需要的修改。通過(guò)這些方法，你是不是覺(jué)得網(wǎng)站設(shè)計(jì)、開(kāi)發(fā)、測(cè)試更靈活，更可控呢。