Home » 程式網站設計

[網頁設計]查看你的網頁在不同裝置上的模樣(手機平板筆電桌電)

No Comment | 3,368 views

Flickr__你的所有內容

一般寫網頁或BLOG的都會有這個疑問,就是我們的網頁在不同平台上看起來是如何?土法煉鋼的話就是拿手機起來開看看,但我們通常有iphone就沒android,反之亦然。所以我們需要這個小工具,兩秒就能知道你的網頁在其他裝置看起來的模樣

進入此工具網站:http://lab.maltewassermann.com/viewport-resizer/

安裝使用方式:就是把下圖那個藍方塊拖到書簽列上面就可以了,

 

 

Responsive_design_testing_tool_–_Viewport_Resizer_–_Emulate_various_screen_resolutions_-_Best_developer_device_testing_toolbar

再來到你的網頁按下這Resizer就可以看見工具列選擇別的裝置

按一次是直向,再按一次就變橫向了

 

 

↔_Responsive_design_testing_tool_–_Viewport_Resizer_–_Emulate_various_screen_resolutions_-_Best_developer_device_testing_toolbar

這很簡單沒啥好說的,我拿我的網頁試試看

Mobile (e.g. Apple iPhone)Size: 320x480 (Portrait), Ratio: 2:3

Google Chromeblog007

Mobile (e.g. Apple iPhone)Size: 480x320 (Landscape), Ratio: 3:2

 

Google Chromeblog008

Apple iPhone 5Size: 320x568 (Portrait), Ratio: 40:71Google Chromeblog009

Apple iPhone 5Size: 568x320 (Landscape), Ratio: 71:40Google Chromeblog010

Small TabletSize: 600x800 (Portrait), Ratio: 3:4Google Chromeblog011

Small TabletSize: 800x600 (Landscape), Ratio: 4:3Google Chromeblog012

 

  • Tablet (e.g. Apple iPad 2-3rd, mini)Size: 768x1024 (Portrait), Ratio: 3:4

Google Chromeblog014

Tablet (e.g. Apple iPad 2-3rd, mini)Size: 1024x768 (Landscape), Ratio: 4:3Google Chromeblog013

WidescreenSize: 1280x800 (Landscape), Ratio: 8:5Google Chromeblog015

HDTV 1080pSize: 1920x1080 (Landscape), Ratio: 16:9Google Chromeblog016

Comments

comments