WebApp移动开发各种屏幕的5种测试方法

2014-09-19

手机浏览器的使用量每天都在增长,根据StatCounter的统计数据,手机和平板的使用量约占30%的网络流量,这意味着消费者耗费在移动版网页上的时间比以往任何时候都高。可即使具备诸如移动端优先的响应式设计,由于目前设备尺寸和种类的繁杂,在加载前对终端屏幕进行测试也是压力山大 的。

StatCounter

在不久的将来,移动互联网将迎来高速发展的时代,提前布局移动互联网刻不容缓。

在移动终端上进行网页测试有很多不同的方法,但是这些方法良莠不齐。以下提供5种不同的测试手机版网页的思路供你参考:

1、在真正的移动设备上测试

在真正的设备上测试手机版网页总是最好的,毕竟模拟器的拟真程度始终是有限的,有些体验的细节无法完全模仿出来。用户体验包含的因素很多,网络的影响,像素密度带来的视觉效果,各种视觉元素的实际大小,网页的实际加载时间,等待都还是实际的设备来的真实。

当然,彻底的测试是不现实的,时间与金钱是每个项目的重要影响因素。不过,在移动端设备测试套件上投资终归是没错的,尤其是当你面对一整套面向客户 的服务的时候,这套测试是非常有必要的。一般而言,这样的一个测试套件中,会由当前最流行的硬件设备组成。如此一来,测试面向的情况和用户所面临的情况是 1:1完全对应的。

如果这样的测试套件超过了你的预算的话,那么你至少还可以拿自己和周围朋友的手机来进行测试,一般而言,能覆盖iOS和Android平台就够了。

2、使用iOS与Android的虚拟机测试

在缺少合适的硬件设备的前提下,软件模拟器还是相当不错的。这些模拟器原本就是拿来测试iOS和Android 的本地应用的,内置的浏览器也尽可能地还原了它们在真实设备上的使用情况。之所以说是尽可能,是因为它始终还是无法完全模拟真实的网络状况、加载时间、触 摸体验、各元素的视觉大小以及其他的细节。好在内置的渲染引擎功能仍是等同的,它依然可以帮你找到跨浏览器所存在的问题。

iOS模拟器

 

3、在BowserStack中测试

如果你没有足够的设备,也不想安装巨大的SDK套件然后调用模拟器来进行测试的话,仍然有办法可以帮你解决问题。BrowserStack就是这样的一种网络服务,它可以帮你测试网页在桌面端和手机端的浏览效果,方便专业的web开发者。

BowserStack

4、使用Responsinator测试

开发者总是力求在真实设备上测试网页效果,至少得在模拟器里面运行看看效果。但是现实生活总是残缺的,以上两种状况可能你都没机会实现。还好目前网上有很多其他的方案可以拿来测试,通常这些工具都通过调整桌面浏览器的尺寸来实现。在这些花哨的服务中, 我们主要推荐Responsinator。

5、使用浏览器插件测试

这里推荐试用chrome windowresizer 扩展,可以改变浏览器窗口大小,可以随意设置窗口大小,但是这种方法从本质上来说算不得“移动端测试”,它只是更方便用来测试网页的响应是否正确,甚 至无法与上述的四种“方法”相提并论。同4一样,浏览器的差异是这种机制的致命缺陷。

windows resizer

立即打赏      分享
【立即加 QQ:6347007 咨询微信定制开发/支付接口开发】

今天就开启您的项目

联系我们开始您的项目。我们如同您一样兴奋不已。

联系我们