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

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

2012年07月17日

最近触摸版视频网项目进入后期阶段,我们 产品部要求 我们的手机站点 http://m.56.com 必须在 UC浏览器8.0以上、安卓2.0以上的自带浏览器上 正常使用无样式功能错误。在在QA测试反馈的bug中发现一些比较神奇的bug,下面给大家分享一下。

图片尺寸问题

在说之前先听我诉说几句…

案发背景

这个在设计师交付过来的设计稿中 一共定了几种尺寸,分别是:焦点图尺寸 640×300,专辑大图 260×155,视频截图 130×78,专题封面图 320×150,美女主播头像图 160×210,美女主播栏目图 180×140。
当初在重构的时候很傻很天真的认为,这些图片的规格虽然多种多样,但是用在这些模块里面,给过来的图片大小就自然而然地也是设计稿的尺寸,毕竟我们有手机项目的编辑在嘛…所以在这个时候,我的做法是 全手机分辨率支持,就是说,不管你拿着的是标准480×800屏幕分辨率的三星智能手机 还是 432×759 这些稀奇古怪分辨率的山寨神机,只要你用的是我所支持的浏览器和系统,我的页面在你机子上的设计稿还原度都是在98.5% 以上的。

然而,理论归理论,别人说设计稿上的效果都是在最理想的情况下才能重现的,这次我深深体会到了。进入开发阶段,一帆风顺,没有遇到什么大bug大错误需要我协助。好了,后台开发完成,数据一接上,没给我看一眼,丢给QA测试,恭喜,QA第一轮测试,15个bug,其中有13个是前端bug,在这之中有11个就是图片尺寸不对的bug。我擦…

然后打开站点一看,里面的图片标签中 高度和宽度都有设置,我就知道原因了,那些 图片被拉伸的bug 就源于此,由于高度 css属性没设置,所以图片高度以标签上的高度为准,这样就导致 这张图片 宽度是根据手机分辨率自行缩放的,而图片高度却是固定的,这样就使这张图片在低分辨率的手机显得被拉高了,而在高分辨率手机下则显得被压扁了。

还有就是 在 图片列表的时候 例如 一行3张的那种,如果图片高度不统一 则使我们这个图片列表显得错乱不堪,各种掉版错位迎面扑来。

然后跑去产品部跟这个项目的负责人讲,他解释道,这些数据由于部分是由机器自动截取,有些是用户自行上传,有些是编辑自行修改,有些是要读取 wap版本的数据,所以导致这些图的大小尺寸都不能保证。哎,我听完后都无语了…

经过多番纠缠,他答应 焦点头图部分、美女主播栏目图部分的尺寸能保证统一,其他的我就自己看着办…

解决方案

要解决图片在各个手机分辨率下都能得到最好的显示效果,我们首先就要为这个我们手机站点定几个标准分辨率(主要是宽度),在这些分辨率节点上,我们各自为 这些图片做一下高度的设置,宽度的话 我们可以用 百分比来解决,就是说 我们要定的 主要是高度。

我们当初为这个网站设定了 3个显示节点 drive-width = 320/480/640。所以我就在这 3个节点上的样式对图片进行处理,如果是其他非主流的,那不好意思,我们就搞拉伸处理吧。

下面举个例子

例如上面图中,我们的HTML结果是这样的:

<!-- html document -->
<ul class="t56_imgtxt_list part2">
	<li>
		<a href="#" class="box">
			<div class="t56_viewbox">
				<img src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="xx.jpg" alt=""/>
			</div>
			<div class="txt_l2">文字文字</div>
		</a>
	</li>
</ul>

基础样式为

/*-- css document --*/
.t56_imgtxt_list{ }
.t56_imgtxt_list:after{ content:"."; display:block; height:0; overflow:hidden; clear:both;}
.t56_imgtxt_list li{ float:left;}
.t56_imgtxt_list li .box{ display:block; padding:10px;}
.t56_imgtxt_list li .t56_viewbox{ width:auto; display:block; margin-bottom:3px;}
.t56_imgtxt_list li .txt_l2{ height:3em;}

.part2 li{ width:50%;}

.t56_viewbox{ position:relative; display:inline-block; vertical-align:middle; width:10.83em; padding:0.125em; border:1px solid #ddd; background:#fff;}
.t56_viewbox img{ display:block; width:100%;}

上面大概就是 通过使用 part2 样式 使 li所占 ul 整体宽度的 50% 然后通过设置里面的 img width=100% 来保证 1 行显示 2 个视频专辑。

明显地,如果把图片高度定死 这里则出现在低分辨率下图片会被拉伸,高分辨率下则被压扁情况,而如果图片高度没定死 而图片提供过来高度宽度参差不齐的话则会出现排列错版问题。

所以为了修复这个bug,我们给主流分辨率下的这种图片作了高度的控制,其他分辨率的话则采取拉伸图片来解决。

首先我们给页面通过媒体查询导入3个样式表:

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

然后我们在各个分辨率对于的样式表中针对这图片 进行处理:

touch.v.1.w320.css文件

/*-- touch.v.1.w320.css --*/
.t56_viewbox img{ height:175px;}

touch.v.1.w480.css文件

/*-- touch.v.1.w480.css --*/
.t56_viewbox img{ height:80px;}

touch.v.1.w640.css文件

/*-- touch.v.1.w640.css --*/
.t56_viewbox img{ height:175px;}

iphone上的 safari 浏览器 分辨率是 320×480

没错,iphone1的safari是320×480,iphone4s的safari也是320×480,十分统一。这个当初在设计前期我们没有一个人知道,产品不知道,我也不知道(我手里没iphone),导致到了现在进入后期阶段才发现。不过这个也不是个大bug,只是当初设计重心是放在 640分辨率下,提供过来的也是 640分辨率的设计稿,其他分辨率的图片都经过压缩缩放,有少许坑睇分辨率用户的流量。

input框在 安卓2.2版本 UC8.5下发现 input输入框的value值被清空

这个可以说是又一纠结的bug,value值那里明明是有东西的,而我机子上明明是有显示默认值的,但是唯独在某些山寨的机子(中x什么的,x兴什么的)的机子上就是死活不显示出来,里面都是空空的。刚开始以为是他系统or浏览器定制了 autocomplete属性为 自动清空所以我屏蔽了这个属性。

<!-- html document -->
<input type="text" value="1" autocomplete="no" />

但是不行,然后我想能不能通过js来对这 input框进行赋值。

<!-- html document -->
<input type="text" value="" autocomplete="no" nowindex="1" />

然后通过js 在页面加载完时 读取 这个input 框的 nowindex 属性 再赋值,可惜 还是不生效。

最后突然想起了 html5 表单的一个属性 placeholder,就是在input 框 内容为空时显示的内容,终于解决的这个bug。

<!-- html document -->
<input type="text" value="" autocomplete="no" placeholder="1" />

部分安卓系统浏览器,不支持alert弹窗。

这个,嗯,没啥好说的,那就能弹就弹,不能弹就不管了(程序哥哥说的)。

可滑动拖拽焦点轮播功能图发现 里面的 连接点击跳转不能

经过排查,找到了原因主要是我在做滑动功能时 在 ontouchstart、ontouchend事件中设置了 取消默认事件、即 e.preventDefault();
去掉即可。

a:visited 显示默认的紫色bug

这个问题,主要是在 UC浏览器上发现的,明明设置是 :visited的颜色属性,在其他浏览器上都是好好的(QQ浏览器、chrome、firefox、opera、 手机自带浏览器),唯独是UC浏览器在这耍流氓,死活不跟着我的指挥棒。但是有些又可以,十分奇怪。

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

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

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

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