首頁 > 移動互聯 > 分享一款在線預覽響應式網頁工具:.resizr

分享一款在線預覽響應式網頁工具:.resizr

2015-04-27 admin 移動互聯 0人評論 40505

3分快3 在平常的工作中,響應式網頁設計調試比一般的網頁麻煩,之前設計達人小編介紹使用Chrome瀏覽器模擬手機端訪問網頁(見附文),效果不錯,而今天再次為大家分享一個在線預覽響應式網頁工具:.resizr,下面來看看介紹。

網站名稱:.resizr

3分快3 網站地址:http://resizr.co/

分享一款在線預覽響應式網頁工具:.resizr  移動互聯  第1張

超多設備預覽

.resizr可以模擬多個種移動手持設備以及平面電腦,比如最新的iPhone6、6+、Amazon Kindle、Samsung手機、Asus Nexus、微軟Surface等設備。

分享一款在線預覽響應式網頁工具:.resizr  移動互聯  第2張

使用介紹:

3分快3 首先輸入要預覽的網址,然后可以通過菜單來選擇不同的設備預覽。

Devices:用于來選擇不同設備對網頁預覽; Portrait:橫屏/豎屏 切換; Hide scrollbar / Show scrollbar:關閉或開啟網頁滾動。

下圖為測試DR-II WordPress主題在iPhone 6顯示的效果:

分享一款在線預覽響應式網頁工具:.resizr  移動互聯  第3張

總結

.resizr 的界面友好,僅用于預覽響應式網頁是不錯的,比如把這個網址發給客戶,讓客戶去預覽你的成果,是不是很方便呢?但如果用于開發測試,還是Chrome實用點,功能強大一些,模擬更真實一些。

附:使用Chrome瀏覽器模擬手機端訪問網頁教程

設置方法:

STEP1:3分快3 首先確保你的Chrome在32以后版本。(小編是Chrome35版本)

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

分享一款在線預覽響應式網頁工具:.resizr  移動互聯  第4張

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

分享一款在線預覽響應式網頁工具:.resizr  移動互聯  第5張

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

分享一款在線預覽響應式網頁工具:.resizr  移動互聯  第6張

 

標簽:

發表評論

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

官方微信公眾號
70755559
09:00 - 22:00
QQ客服: 70755559
客服郵箱: 678128@qq.com
2分快3-推荐 1分快3-官网 好运快3-欢迎您 幸运快3-安全购彩 网投app-Welcome 分分快3app-Home 1分快三平台-3分快3 彩票代理-推荐 五福彩票-官网 彩票大赢家-欢迎您