欢迎来到 jackNEss'窝窝
I like simple mind

手机前端开发经验分享——android、ios篇(测试部分)

2012年07月17日

手机项目进入测试阶段,测试把问题反馈到我们前端这里,我们改完丢回给测试,明明是改好的了,但是在测试机子上刷新了半天还是刷不出来,然后我们一起纠结了半天发现…我擦原来是手机浏览器缓存问题。

在手机项目中我发现 手机浏览器上的缓存可以说不是一般的大,有时候等了整整半天,那机子上还是修改前的状态,特别是iphone(幸好的是公司里面拥有iphone的人特多,这台不行就借下一台,总有一台没测试过被测网页),下面来介绍一下我们手机android、ios web app项目中清除缓存的几个方法。

为js、css文件添加版本号

这个是通过后台清除缓存的方法,可以说是最有效的方法之一,不足之处就是常常要麻烦程序GG更新版本号。

例如:我们的样式一般情况下是这样写的

<!-- html document >
<!-- debug js -->
<script src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="../script/f2e_slidebox_m.js" type="text/javascript" ></script>
<script src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="../script/f2e_touch_globe.js" type="text/javascript" ></script>

<!-- debug css -->
<link href="../css/touch.v.1.css" rel="stylesheet" />
<link href="../css/touch.v.1.w320.css"  media="all and (min-width:320px) and (max-width:479px)" rel="stylesheet" />
<link href="../css/touch.v.1.w480.css"  media="all and (min-width:480px) and (max-width:639px)" rel="stylesheet" />
<link href="../css/touch.v.1.w640.css"  media="all and (min-width:640px)" rel="stylesheet" />

为了防止我们修改后页面在用户的机子上有缓存,我们通常给这些文件添加版本号,每次修改都更新一次(至少被修改的文件的版本号要更新)

<!-- html document >
<!-- debug js -->
<script src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="../script/f2e_slidebox_m.js?v=201207171156" type="text/javascript" ></script>
<script src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="../script/f2e_touch_globe.js?v=201207171156" type="text/javascript" ></script>

<!-- debug css -->
<link href="../css/touch.v.1.css?v=201207171156" rel="stylesheet" />
<link href="../css/touch.v.1.w320.css?v=201207171156"  media="all and (min-width:320px) and (max-width:479px)" rel="stylesheet" />
<link href="../css/touch.v.1.w480.css?v=201207171156"  media="all and (min-width:480px) and (max-width:639px)" rel="stylesheet" />
<link href="../css/touch.v.1.w640.css?v=201207171156"  media="all and (min-width:640px)" rel="stylesheet" />

清楚测试手机上的浏览器缓存

产品始终是面向手机用户的,所以说真机的测试 还是必不可少的环节,虽然,我真的得说一句,手机浏览器的缓存还真的不是一般的大。下面来介绍一下几个常用浏览器清除手机缓存的方法,虽然真的并不是万事万能清完就万事大吉…但是也是有一点儿作用的。

UC浏览器

UC8.5 版本浏览器 可以通过 菜单 > 设置 > 系统设置 > 基本设置 > 清除数据 > 清除 来把浏览器数据清除掉。

我们同时也可以把 UC浏览器的磁盘优化关掉来避免缓存。 菜单 > 设置 > 系统设置 > 高级设置 > 磁盘缓存 > 关

UC7.9 版本浏览器 可以通过 菜单 > 设置 > 系统设置 > 安全设置 > 清除记录 > 确定 来把浏览器数据清除掉。

自带浏览器

自带浏览器(这里演示的是android 4.0自带的浏览器) 可以通过 菜单 > 设定 > 隐私和安全 > 清除缓存 > 确认 来把浏览器数据清除掉。

QQ浏览器

QQ浏览器(这里演示的是v3.4版本) 可以通过 菜单 > 系统设置 > 隐私 > 清除记录 > 清除 来把浏览器数据清除掉。

Opera Mobile浏览器

Opera Mobile浏览器(这里演示的是12.0版本) 可以通过 菜单 > 设置 > 隐私 > 清除缓存/清除cookies 来把浏览器数据清除掉。

Chrome 浏览器

Chrome浏览器(这里演示的是 Chrome Beta 0.18.4409.2396版本) 可以通过 菜单 > 设置 > 清除浏览器数据 > 清除 来把浏览器数据清除掉。

Firefox 浏览器

直到本文章之前,firefox 手机版本暂时还不支持中文…

Firefox浏览器(这里演示的是 10.0.3版本) 可以通过 menu > preferences > clear private data > clear 来把浏览器数据清除掉。

Safari 浏览器

iphone上的 Safari 浏览器(这里演示的是 10.0.3版本) 可以通过 系统菜单 > 设置 > Safari > 清除cookies和数据 > 清除cookies和数据 来把cookies 和数据清除。

同时也要 通过 系统菜单 > 设置 > Safari > 高级 > 网站数据 > 移除所有网站数据 来把浏览器数据清除掉。

Tips

值得注意的是,全部浏览器清除完缓存之后 都必须重启,如果不行…那就让他一边呆着10分钟,看人品是否好,好的话,那恭喜,数据就刷新到最新版本了

使用官方浏览器专用模拟器查看改动情况和效果

由于手机缓存大,很多时候都刷新不到最新版本的情况,所以我们在开发和更新的时候,第一时间看的往往不是手机,而是以下我介绍到的工具。

下面介绍一下我用到的有 2 个,分别是 opera 提供的 Opera Mobile Emulator 和 我们的 Safari 开发模式下的 用户代理。这2个可以说给我们手机前端开发带来很大的便利。至少可以在修改调试 和开发的时候不用常常把修改内容丢服务器上,然后再用手机去访问,直接在电脑上就能观察到效果了。

Opera Mobile Emulator

参与过web app开发的童鞋应该对这个十分了解,这个软件可以更方便、更直观地在pc端为大家提供 opera 浏览器不同手机上的渲染情况和表现效果,而且还原度还是相当地高。

软件中提供多种手机型号供大家参考,还可以自定义尺寸 分辨率,dpi等参数,可以说是 web app 开发必备。

这里有这个软件的传送门 http://cn.opera.com/developer/tools/mobile/

Safari

Safari 在开发选项中提供了 模拟各个 苹果旗下系统的用户代理选项,通过这个用户代理就可以轻松把pc上的 safari浏览器转变为 ipad上的、iphone上的 mac os 上的 safari 浏览器模式(当然手指触摸模拟是不提供的)。

这里以 Safari 5.1.7为例子:

首先选择 Safari 浏览器的工具选项,然后选择 偏好设置。

在偏好设置的 高级选项中,勾选 在菜单栏中显示“开发”菜单 选项。

然后点击菜单,在开发选项中 选中 用户代理,里面就有各种版本的浏览器模拟模式了。

web app 开发主要用到的是 ipad 模式、ipod touch模式 和 iphone模式。

分类HTML + CSS
标签
阅读 960
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS