测试手机网页的5大方法


  @陈子木 细心的同学不难发现,现在用手机访问优设网有了全新的阅读体验,而且速度很快。有这样的改变其实也是收到了很多来自微信、微博粉丝的建议,大家想在上班、下班及睡觉的时候阅读收藏在微博和浏览器(同步)里的优设文章。

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


  在不久的将来,移动端会让桌面端的设备黯然失色。

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

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

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

  当然,彻底的测试是不现实的,时间与金钱是每个项目的重要影响因素。不过,在移动端设备测试套件上投资终归是没错的,尤其是当你面对一整套面向客户的服务的时候,这套测试是非常有必要的。一般而言,这样的一个测试套件中,会由当前最流行的硬件设备组成。如此一来,测试面向的情况和用户所面临的情况是1:1完全对应的。Brad Frost曾经写过一篇文章专门探讨如何进行这种测试,虽然文章稍微老了点,但是文章的思想是完全没有问题的。

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

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

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


  iOS模拟器内置在Xcode当中,iOS开发者可以轻易调用。而Android 模拟器则包含在Android SDK中,三大平台上都有。目前甚至还有第三方的独立的模拟器可以供你使用,不过是否能达到原生模拟器的效果,还需要你根据实际产品来进行判断。

   3、在BowserStack中测试

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

  目前,BrowserStack提供的完整服务是收费的,它的免费部分是帮你进行测试并截图保存。当你付费之后,你测试网页在不同设备上的浏览效果的时候还可以进行交互,掌控更多的细节。即使你拥有整套测试套件,BrowserStack服务仍然能帮你发现更多容易忽略的细节。

    4、使用Responsinator测试

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


  你只需要进入Responsinator网站,输入你要测试的网页的URL,它就会产生实时的预览,这些预览中包含了目前主流的硬件设备的预览效果图。坦率的说,它更接近于对网页进行一个大概的“健康检查”,非常有帮助,但说无法解决所有的问题。严格意义上来将,所有的类似服务都无法达到模拟器的效果,就更不用说实际设备测试了,因为本质上来说,类似Responsinator这样的服务还是基于你的桌面端浏览器,这与你的移动端浏览器以及它的模拟器有着本质上的差别。

  5、调整浏览器

  正如4中所说,这些第三方服务本质上就是调整浏览器尺寸,然后显示调整后的网页渲染效果。所以,很多开发者会直接调整浏览器尺寸来测试这些响应式的移动端网页。如此一来,你可以一边写代码一边测试,也不错。但是这种方法从本质上来说算不得“移动端测试”,它只是更方便用来测试网页的响应是否正确,甚至无法与上述的四种“方法”相提并论。同4一样,浏览器的差异是这种机制的致命缺陷。

  结语

  因为开发周期、环境等实际情况的差异,开发者会选择不同的的方法来测试手机端网页。以上5种方式并不是全部,实际开发者所用的方法远不止这5种。如果你还有其他的测试方法,请浏览告诉我们吧!

  原文地址:teamtreehouse

  优设网翻译:@陈子木

  本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

时间: 2024-11-30 05:23:24

测试手机网页的5大方法的相关文章

教你测试手机网页的五大方法

  @陈子木 细心的同学不难发现,现在用手机访问优设网有了全新的阅读体验,而且速度很快.有这样的改变其实也是收到了很多来自微信.微博粉丝的建议,大家想在上班.下班及睡觉的时候阅读收藏在微博和浏览器(同步)里的优设文章. 我们知道手机浏览器的使用量每天都在增长,根据StatCounter的统计数据,手机和平板的使用量约占30%的网络流量,这意味着消费者耗费在移动版网页上的时间比以往任何时候都高.可即使具备诸如移动端优先的响应式设计,由于目前设备尺寸和种类的繁杂,在加载前对终端屏幕进行测试也是压力山

超级手机病毒事件:病毒测试的风险有多大?

中介交易 SEO诊断 淘宝客 云主机 技术大厅 这个七夕,不管你们是否过得开心,制作超级手机病毒的中南大学90后学子李某,在铁窗下冷静思考,肯定不开心.在这个由李某引发超级手机病毒事件中,互联网时代的病毒测试风险究竟有多大?网络编程学习者又该如何更好地控制软件测试的风险呢? 起底"XX神器"超级手机病毒的因果 2014七夕期间,中南大学大一学生李某制作的"XX神器"超级手机病毒,在全国内大范围传播,用户感染病毒之后将开始向手机通讯录的联系人们群发"看这个,

移动应用交互设计:手机客户端的交互适配方法

文章描述:本文中,我想简单的总结一下手机客户端的交互适配方法,希望能更好地来指导当前移动应用的设计需求. 简摘:本文从手机平台.机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂.在设计单款.单系列手机时,需要考虑这款手机的软.硬件优势及不足,考虑其特性.其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.说起来,这至多是考虑某个系统.某个屏幕的特性而已,

如何在电脑上测试手机网站(全)

原文:如何在电脑上测试手机网站(全) 最近公司要开发网站的移动版,让我准备准备知识,话说本人开发移动网站的经验还真不多,最悲剧的事情就是我的手机是个经典的诺基亚,而且公司还不给配手机,这是有多讨厌,没办法,没有手机只能用电脑模拟了,相办法代替,查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. Chrome* chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将

手机界面-手机网页视口宽度和手机分辨率

问题描述 手机网页视口宽度和手机分辨率 我做了一个手机界面,在苹果4S上调试 如图宽度设置为100%:有两点不明白,望大神们指教: 1:苹果4S的分辨率是480*960,为什么调试窗口的大小是320*480: 2:如图的宽度我设置的是100%:为什么宽度变成了960: ps:在头部我设置了width=device-width: 解决方案 手机上网页宽度自适应问题 解决方案二: 可能是网页端有差异.建议在网页端上大概调一下,然后在真机上测试.

安卓手机屏幕是越来越大

现在许多人喜欢晚上躺在床上看新闻http://www.aliyun.com/zixun/aggregation/2934.html">资讯,特别是晚上临睡前,许多人也因此视力变的越来越差,甚至戴上了眼镜.目前安卓手机屏幕是越来越大,亮度越来越足,虽在白天光线的情况下能看的清楚,但是晚上用却不方便,系统内置调整特别麻烦,怎么办呢?不用担心,傲游手机浏览器除了能一键调节夜间/白天两个模式之外,还在此基础上优化了大家的需求,推出了贴心的亮度调节功能. 软件名称:傲游手机浏览器软件版本:2.4.7

php支付宝手机网页支付类实例_php实例

本文实例讲述了php支付宝手机网页支付类.分享给大家供大家参考.具体分析如下: 此处注意: ① 该类是用在Yii框架里面的,没有去掉一些框架的东西. ② 本类不能不做任何修改而使用. 1. PHP代码部分如下:     复制代码 代码如下: <?php namespace weixin\components; use Yii; /**  * 支付宝手机网页支付  *  * @example  *     创建支付请求  *     $params = []; //支付宝文档中所需的全部参数  *

提高网站流量的十大方法你知道多少?

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 大家好,我是木子成舟.目前为止也写了不少文章了,文章虽然写的不是很好,但是还是受到了很多朋友的青睐,在文章里面留上了QQ,也有不少的人加我,真的很感谢大家对我的支持!废话少说,直接步入正题! 今天我要跟大家分享一下我关于如何提升网站流量的一些经验.大家都知道一个网站要盈利首先要有流量,要有流量,首先要有好的排名;要有好的排名,我们就要想办法.

Android使用原生组件WebView加载网页和数据的方法_Android

在Api中关于这个类的介绍大致就是这是一个可以显示网页的视图,如: webView.loadUrl(http://www.baidu.com/); 显示结果: 还可以加载一些html的字符串,如: String str = "<html><body>You scored <b>192</b> points.</body></html>"; webView.loadData(str, "text/html&