冠富商务通中文社区

标题: 分享一款在线预览响应式网页工具：.resizr [打印本页]

作者: cntp 时间: 2017-1-9 23:24
标题: 分享一款在线预览响应式网页工具：.resizr
在平常的工作中，响应式网页设计调试比一般的网页麻烦，之前设计达人小编介绍使用Chrome浏览器模拟手机端访问网页（见附文），效果不错，而今天再次为大家分享一个在线预览响应式网页工具：.resizr，下面来看看介绍。
网站名称：.resizr
网站地址：http://resizr.co/

超多设备预览
.resizr可以模拟多个种移动手持设备以及平面电脑，比如最新的iPhone6、6+、Amazon Kindle、Samsung手机、Asus Nexus、微软Surface等设备。

使用介绍:
首先输入要预览的网址，然后可以通过菜单来选择不同的设备预览。
Devices：用于来选择不同设备对网页预览； Portrait：横屏/竖屏切换； Hide scrollbar / Show scrollbar：关闭或开启网页滚动。
下图为测试DR-II WordPress主题在iPhone 6显示的效果：

总结
.resizr 的界面友好，仅用于预览响应式网页是不错的，比如把这个网址发给客户，让客户去预览你的成果，是不是很方便呢？但如果用于开发测试，还是Chrome实用点，功能强大一些，模拟更真实一些。
附：使用Chrome浏览器模拟手机端访问网页教程
设置方法：
STEP1: 首先确保你的Chrome在32以后版本。（小编是Chrome35版本）
STEP2: 按F12或（Ctrl+Shift+I）键来打开”开发者工具”，点击[Show drawer.]图标，如下图：

STEP3: 选择[Emulation]后再点击[Emulate]按钮即可。

除些之外，我们可以用Device来选择对应的机型进行测试，这里我们选择了iPhone 5，效果如下图，如果没有效果的刷新下网页就可以了。

注：相关网站建设技巧阅读请移步到建站教程频道。

欢迎光临冠富商务通中文社区 (http://gu1vhwx.nat.ipyingshe.com/news/)