派琪网络传媒-高端网站建设与网络营销服务商
专注更高品质上海网站建设
与网络推广营销服务商

如何免费测试自适应网页设计(下)

时间: 2013-08-22 分类: 网站设计 浏览次数: 557
分享到:

上海网站建设 上海网站设计(www.paiky.net)   接着上篇继续探讨......   deviceponsive   deviceponsiv...

上海网站建设 上海网站设计www.paiky.net

 

接着上篇继续探讨......

 

deviceponsive

 

deviceponsive  类似于上面的自适应测试?它简单,干净显示您的网站。一旦所有设备都显示在一个很长的页面上。它有一个有趣的功能,您可以自定义编辑标题的背景颜色和嵌入自己的标志,网站标题。在某种程度上,当你共享给客户分享截图。能够推销你的网站品牌。

 

本网站效仿的设备和屏幕尺寸

  • Macbook - 1280×800
  • iPad的肖像 - 768×1024
  • iPad的景观 - 1024×768
  • Kindle的肖像 - 600×1024
  • Kindle的景观 - 1024×600
  • iPhone的肖像 - 320×480
  • iPhone景观 - 480×320
  • 银河肖像 - 240×320
  • 银河景观 - 320×240

与大多数这些工具中,滚动条被显示在更小的设备上。在实际设备上,他们不会显示,但允许非触摸滚动设备滚动测试视图,必须作出一些让步。

 

aaaa1

 

 

 

自适应测试

 

自适应测试和 deviceponsive一样,在各种设备上显示您的网站,但代替曾经在页面上显示它们,在页面顶部,你选择哪个设备查看一个简单的菜单。一个中型的笔记本电脑上浏览本网站,我发现缩放页面出来的效果很好,让你看到整个测试现场。

 

在这里提供13个不同的视口,范围从一个大的桌面显示器到他们所谓的'蹩脚的Android

 

再次,Firefox浏览器显示的显示的有些不同。请注意在截图中,绿头和白色背景内容区域之间,只有一个蓝色的条纹图像滑块应显示。

 

aaaaaa1

 

 

 

responsive.is

 

与前面两个项目颇为相似 ,可供选择的唯一设备是自动填补您的浏览器窗口,显示该网站,你会看到它,桌面、平板、智能手机,像素尺寸不定。

 

aaaaaaa2

 

 

 

 结论

 

因此,我们看到有不少的测试自适应网站资源。区别独特的功能,你可以根据自己的个人喜好和要求来进行选择,我鼓励你去探索和实验。

未经允许不得转载:派琪PAIKY