[網頁設計]查看你的網頁在不同裝置上的模樣(手機平板筆電桌電)
一般寫網頁或BLOG的都會有這個疑問,就是我們的網頁在不同平台上看起來是如何?土法煉鋼的話就是拿手機起來開看看,但我們通常有iphone就沒android,反之亦然。所以我們需要這個小工具,兩秒就能知道你的網頁在其他裝置看起來的模樣
進入此工具網站:http://lab.maltewassermann.com/viewport-resizer/
安裝使用方式:就是把下圖那個藍方塊拖到書簽列上面就可以了,
再來到你的網頁按下這Resizer就可以看見工具列選擇別的裝置
按一次是直向,再按一次就變橫向了
這很簡單沒啥好說的,我拿我的網頁試試看
Mobile (e.g. Apple iPhone)Size: 320x480 (Portrait), Ratio: 2:3
Mobile (e.g. Apple iPhone)Size: 480x320 (Landscape), Ratio: 3:2
Apple iPhone 5Size: 320x568 (Portrait), Ratio: 40:71
Apple iPhone 5Size: 568x320 (Landscape), Ratio: 71:40
Small TabletSize: 600x800 (Portrait), Ratio: 3:4
Small TabletSize: 800x600 (Landscape), Ratio: 4:3
- Tablet (e.g. Apple iPad 2-3rd, mini)Size: 768x1024 (Portrait), Ratio: 3:4
Tablet (e.g. Apple iPad 2-3rd, mini)Size: 1024x768 (Landscape), Ratio: 4:3
WidescreenSize: 1280x800 (Landscape), Ratio: 8:5
HDTV 1080pSize: 1920x1080 (Landscape), Ratio: 16:9
你可能需要看的文章
Comments