两个在线模拟网页在不同分辨率设备下显示效果的网站

标题说的有些拗口了,但是意思很简单,就是在线帮你模拟你的网站在其他设备上的显示效果.现在打着响应式旗号的模板太多了,但是到底在各种分辨率的设备上显示效果如何还是需要切身去测试一下的.而对于那些不使用模板而自己开发的网站,这种测试就更有必要了.然而每个人手头的设备数量总归是有限的,不可能实际去完成每个分辨率效果的测试,这个时候就需要这样的网站来帮忙模拟展示你的页面.

今天搜索一下发现两个这样的网站.类似功能的网站肯定不少,但是这两个功能已经足够用了,界面也挺友好,访问速度也足够快.

1. Quirktools-Screenfly (quirktools.com/screenfly)

该网站还有一个网站地图(Smaps)和一个我也没研究清楚的功能(Wires),有兴趣的可以自行琢磨.

打开Screenfly页面输入网站url就开始模拟了.分辨率支持很全面,主流的移动设备,笔记本,电视都有,即使想测试的分辨率不在列表里还有一个"Custom screen size",长宽随你输.给几张我测试的效果图片.1.10寸笔记本(1024×600)下显示效果


▲ Google Nexus 7(603×966)下显示效果


▲ Apple iPhone5(320×568)下显示效果(这个分辨率貌似有错,但是网站就是这样写的)


▲ 还是Google Nexus 7下显示效果,这次屏幕翻转一下(966×603)

功能还是相当周到的,允许模拟旋转屏幕,允许选择是否开启滚动栏(Allow scrolling),如果不开启滚动栏的话想要滚动屏幕只能通过单击鼠标中键后上下移动.还有一个是否使用代理的选项(Use proxy server),但是不知道这个对显示效果会有什么影响,除了加载速度变的巨慢外我没看出任何区别...

2. iPadpeek (ipadpeek.com)

这个网站功能就更简单了,只能模拟iPad下的显示效果,分辨率不允许调节.不过界面很大方,连弹出虚拟键盘的效果都考虑到了.

不过这个比例怎么感觉和实际的iPad不大一样呢?iPad有那么宽吗?

2 Comments

  1. batteryplus 2015-07-24 Reply

    这个网站貌似不能用了啊

  2. 突击语文 2014-10-06 Reply

    分辨率没有错,因为Retina的显示屏为4个像素塞进一个像素格,也就是横竖乘于2,iPhone5是640*1136,所以原始格子就是320*568。

Leave a reply

Your email address will not be published.