使用Chrome瀏覽器模擬手機網頁

Google_Chrome_icon_(2011)

在2014年開始,兼容手機和平板設備的網站將會越來越流行,響應式網頁也是未來的設計趨勢。今天我們將介紹使用Chrome瀏覽器來模擬真實的手機網站,這樣方便設計師和前端人員測試頁面的兼容性。

下面來看看設置方法:

STEP1: 首先確保你的Chrome在32以後版本。

STEP2: 按F12或(Ctrl+Shift+I)鍵來打開”開發者工具”,點擊[Show drawer.]圖標,如下圖:

 

設圖

 

STEP3: 選擇[Emulation]後再點擊[Emulate]按鈕即可。

 

未命名-2

除些之外,我們可以用Device來選擇對應的機型進行測試,這裡我們選擇了iPhone 5,效果如下圖,如果沒有效果的刷新下網頁就可以了。

 

未命名-3

 

是不是很方便呢!很酷的喔!!!

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s