PC版的Chrome可以模擬行動裝置對HTML5除錯

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


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


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


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


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

Windows 11安裝時跳過網路連線