今天在測試開發HTML5時，發現Chromew可以模擬行動裝置除錯，方便HTML5在行動裝置上的除錯。
如下圖點選紅色框選處並選擇「更多工具」的「開發人員工具」
I01

開發人員工具的工具列上有一個行動裝置的圖示，如下圖紅色圈選處，按下圖示
I02

Chrome會切換成行動裝置的尺寸，還可以自己模擬裝置的大小，以符合不同的行動裝置尺寸。
切換成行動裝置後，必須重新載入（refresh）我們設計的網頁，才能正確地顯示。
I03

在區域1可以模擬不同的廠牌及型號的行動裝置，如HTC、Apple、LG等。
區域2可以模擬不同的連線速度對網頁載入時間的影響，如GPRS、3G、Wifi
區域3可以自訂螢幕大小，還有一個類似圈圈的圖示，可以模擬橫向的行動裝置
I04

有了這個工具，在設計HTML5的網頁上，可以更方便設計適合各種裝置的嚮應式網頁



arrow
arrow
    全站熱搜

    keven 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄