手机浏览器的使用与日俱增。根据StatCounter的数据,手机和平板电脑产生的流量约占网络流量的30%。这意味着消费者对移动网站的需求比以往任何时候都高。鉴于消费者的移动设备种类繁多,即使采用移动优先响应式设计等智能技术,在交付前测试网站也至关重要。现在有很多方法可以在移动设备上测试您的网站,而且它们并不都是一样的。这里有五种不同的测试移动网站的方法,从最理想到最不受欢迎。1.在真实移动设备上测试在真实设备上测试站点一直是最好的方法,因为有很多体验是无法通过简单的模仿或伪造来实现的。用户体验包含许多因素,例如可变的网络条件、像素密度、对象的相对大小和实际页面加载时间。最重要的是,每个站点都可以在可能浏览它的任何设备上进行测试。当然,这样全面的测试是不切实际的,因为任何项目都涉及时间和金钱因素。然而,投资移动设备测试套件仍然是明智之举。如果您经营一家拥有大量客户群的企业,这是非常必要的。移动测试套件通常会考虑大多数更流行的移动浏览器设备。这使得能够在真实条件下进行物理测试,并提供接近1:1的真实用户体验。BradForst写了一篇关于应该测试哪些移动设备的好文章(这篇文章已经有几年了,但总体原则仍然相同)。如果移动设备测试套件超出您的预算,唯一剩下的解决方案就是使用您自己的智能手机和移动设备。最有可能的情况是你使用的是iOS或者Android系统的手机,这至少会让你知道一大批人看到后的想法。如果您的朋友或家人正在使用其他系统设备,您也可以通过他们的接收设备快速查看您的站点。2.使用iOS或Android模拟器物理硬件无法替代,但软件模拟器很好。iOS和Android模拟器主要用于测试本机应用程序,但它们也包括每个设备的默认浏览器,这将使您非常接近页面的外观。我说近似值是因为它们不是真实的网络环境、页面加载速度、对象的相对大小以及通过物理设备获得的其他一些细节。但是,渲染引擎帮助您发现跨浏览器问题的功能仍然是等效的。Xcode附带的iOS模拟器可以轻松查看您的网站在iPhone和iPad上的外观。iOSSimulator是Xcode中提供的一个工具。首先,从MacAppStore安装Xcode。然后打开Xcode工具栏并选择Xcode>OpenDeveloperTool>iOSSimulator。不幸的是,Xcode仅适用于Mac,因此如果您使用的是Windows或Linux,则必须以其他方式进行测试。Android模拟器包括AndroidSDK。您可以在此处了解有关Android模拟器的更多信息。3.在BrowserStack上测试如果您手边没有设备测试套件,并且安装iOS和Android模拟器也不起作用,那么还有很多其他选择。BrowserStack是一种网络服务,提供对桌面和移动设备的访问,允许网络专业人员测试他们的网站。这是一项付费服务??,但我应该指出这不是付费支持。然而,多年来我发现了一个免费的屏幕截图服务,正如俗语所说,一分钱一分货。BrowserStacks不仅仅是屏幕截图,因为它们还可以直接与测试设备进行交互。即使你有移动设备测试套件,BrowserStack仍然可以有效地帮助你填补一些你可能没有发现的漏洞。4.使用ResponsinatorDetection您可能会努力在真实设备或至少是准确的模拟设备上进行测试。但是,由于种种原因,这基本上是不可能的,只能通过改变桌面浏览器的大小来测试。有很多好的工具可以执行此操作,但其中最简单的工具之一是Responsinator。您转到Responsinator网站,在页面顶部输入您的URL,它会在一些主要设备上为您生成即时预览。这有助于快速“健全性检查”,但请记住,这不能替代真实设备,甚至不能替代模拟器,因为它使用与浏览器相同的渲染引擎。换句话说,它不会神奇地使用移动浏览器的呈现引擎来呈现您的网站。相反,它只是将您的浏览器调整为特定大小。5.调整浏览器大小调整浏览器大小是设计人员和开发人员在开发网站时快速检测的一种非常常用的方法。强烈鼓励在编码时这样做。然而,这只是最基本的测试形式,根本算不上“测试”。虽然这种方法在您更改代码后可以非常快速地进行检查,但它无法与其他方法相提并论。浏览器大小随意,渲染引擎不同,没有网络延迟等等。这种做法与现实世界的严密性相差太大。你如何测试它?这不是一个完整的列表。虽然这涵盖了大部分移动端测试的分类方法,但还是有一些差异我可能忽略了,一定还有大量相应的测试工具我没有提到。如果您有自己独特的移动网站测试方法,或者您采用的方法未在此处介绍,我很乐意在评论中看到您的方法。原文地址:treehouseblog译者:Specs
