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

手机前端开发经验分享——wap2.0篇

2012年07月03日

手机前端开发经验分享——wap2.0篇

对于我们前端来讲,wap2.0开发无疑是对我们的一个考验,这个考验主要是考验我们对于重构方面的功底。下面主要分 UI、HTML、CSS、Javascript三方面给大家分享在wap2.0开发中的一些个人经验。

兼容性方面

在介绍之前首先我得吐槽下wap2.0网页开发在兼容性上的事儿。

兼容性测试:比web浏览器还恐怖的手机浏览器

在这里,我拿我们传统的 web站点与wap2.0站点作对比,看看我们在兼容性测试中我们前端有多少活要干。

web站点兼容性测试

对于web网站,一般来说,目前我们需要兼容的是

1个操作系统(windows)X 4种浏览器(ie6、ie7、ie8、firefox)= 3种情况

要求高一点的web网站需要兼容的是

1个操作系统(windows)X 10 种浏览器(ie6、ie7、ie8、ie9、firefox3.6、firefox、chorme、opera、safari、遨游)+ 1个操作系统(mac) X 1种浏览器(safari)= 11种情况

wap2.0站点兼容性测试

做过wap2.0站点开发之后,你就会发现…IE6其实已经是很好的浏览器了,真的。

手机浏览器有多少种需要兼容

要做到比较好的兼容性,我们要兼容的手机浏览器至少有二十种情况(手机自带的浏览器+用户可安装的浏览器)

影响你wap页面整体效果的还包括:
  • 手机型号
  • 操作系统
  • 浏览器类型
  • 屏幕尺寸
  • 颜色深度
还有两个更令人头痛的问题:
  • 你没法使用css hack
  • 你也没法逐一去测试各浏览器的实际效果

UI方面

在UI方面,由于不是我们前端负责的部分,在这里我就说一下我在开发过程中遇到的在UI上要注意的地方了

设计风格(色彩配色)

由于不同手机的颜色深度不一样,有的手机4096色,有的则1200w色,为了向下兼容颜色深度较少的手机,我们在UI设计的时候尽量简单为主,减少渐变特别是大范围的渐变色块的出现,避免在颜色深度不足的手机上出现颜色分层现象。

布局方面

由于不同手机屏幕尺寸差异性较大,有180×120分辨率的,也有540×960分辨率的,所以在设计上应该尽量采取简单布局,尽量少出现左右布局,因为在wap2.0站点上面 左右布局是做不了自适应的。

公司ui决定我们的wap2.0站点最小分辨率为240x360px,小于这个分辨率的用户…自己就看着办吧。

HTML方面

以下所说的“大多数”是指在我们测试过的机型中,发生此类状况的手机占比达50%及以上,“部分”为20%到50%;“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型,虽然我们采集的样本尽量覆盖各种特征、手机,但并不代表所有手机的情况。

大多数手机不支持的

  • 表单元素的“disable”属性

部分手机不支持的

  • <button>标签
  • input[type=file]标签
  • <iframe>标签

虽然只有部分手机不支持这几个标签,但因为这些标签在页面中往往具有非常重要的功能,所以属于高危标签,要谨慎使用

少数手机不支持的

<select>标签:该标签如果被赋予比较复杂的CSS属性,可能会导致显示不正常,比如“vertical-align:middle”

以上是 淘宝ued上面文章写到的,这里 是传送门。

我想说的是

在实际开发中,我们使用标签可以算是少了很多很多的选择了,因为,在调试中发现

<li>标签在部分手机上左侧那小点是默认保留的,而且设置 list-style:none 无效

这个影响的有,我们在web网站中用在列表,导航中的 ul > li 结构 不得不用其他结构替换掉。

在这里我就举个实际例子

这个是我们wap站点的导航部分。

原先在web上的结构是这样的

<ul>
	<li>搞笑</li>
	<li>动漫</li>
	<li>游戏</li>
	<li>娱乐</li>
	<li>原创</li>
	<li>影视</li>
	<li>音乐</li>
	<li>体育</li>
</ul>

在wap2.0站点上得改成

<div>
	<span>搞笑</span>
	<span>动漫</span>
	<span>游戏</span>
	<span>娱乐</span>
	<span>原创</span>
	<span>影视</span>
	<span>音乐</span>
	<span>体育</span>
</div>

然后第二个问题 就是要不要让导航自适应,就是说 如果手机屏幕足够大,能否考虑将8个导航文字,一列排过去,但是与ui那边讨论过之后决定使用居左排列2行的形式,即如果屏幕足够大,则会背景向右延伸,但导航文字距离保持不变。

关于当初定的以 240×360分辨率为最小分辨率所衍生的问题

这个问题出现在nokia手机上面,页面做出来之后在nokia 5800 s60 v5系统上面发现出来之后整个页面显得很小,320×480分辨率导航文字部分只占到手机屏幕宽度的一半左右,在百思不得其解之后,只好参考其他同类型网站,发觉 激动网的 wap版本 用了个 viewport 属性,并把页面的初始大小为原来的1.4倍,即

<!-- html document -->
<meta name="viewport" content="width=device-width; initial-scale=1.4; minimum-scale=1.0; maximum-scale=2.0" />

这样 nokia 的 塞班用户 与 高端智能手机如 android 和 ios 用户就能看页面清晰些大些,而低端用户由于不支持 viewport属性,所以没影响。

放大之后图片变模糊解决方案

和产品部门说明原因之后,解决了。怎么解决?没得解决…

CSS方面

以下所说的“大多数”是指在我们测试过的机型中,发生此类状况的手机占比达50%及以上,“部分”为20%到50%;“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型,虽然我们采集的样本尽量覆盖各种特征、手机,但并不代表所有手机的情况。

大部分手机不支持的:

  • “font-family”属性:因为手机基本上只安装了宋体这一种中文字体;
  • “font-family:bold;”:对中文字符无效,但一般对英文字符是有效的;
  • “font-style: italic;”:同上;
  • “font-size”属性:比如12px的中文和14px的中文看起来一样大,当字符大小为18px的时候你也许能看出来一些区别;
  • “white-space/word-wrap”属性:无法设置强制换行,所以当你网页有很多中文的时候,需要特别关注不要让过多连写的英文字符撑开页面;
  • “background-position”属性:但背景图片的其他属性设定是支持的;
  • “position”属性;
  • “overflow”属性;
  • “display”属性;
  • “min-height”和”min-weidth”属性;

部分手机不支持的:

  • “height”属性:对”height”的支持不太好,奇怪的是在我们的测试当中,仅仅只有很少部分手机不支持”width”属性;
  • “pading”属性
  • “margin”属性:更高比例的手机不支持”margin”的负值。

少数手机对CSS完全不支持;

以上是 淘宝ued上面文章写到的,这里 是传送门。

我想说的是

在进入实际开发的时候,我发现其实还有一部分的手机不支持 float 属性,超级郁闷!

这样的话 一些左右布局 就不能用了。

Javascript方面

这部分测试相对不那么让人抓狂,要么干脆不支持,如果支持的话,对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中,支持(包括不完全支持)JavaScript的手机比例大约在一半左右,当然,对于我们来说,最重要的不是这个比例,而是要如何做好JavaScript的优雅降级

其他方面

除了以上说写之外,还有一些不得不知道的小细节要注意的。

  • 部分手机不支持png8和png24,所以尽量使用jpg和gif的图片
  • 部分手机对于超大图片,既不进行缩放,也不显示横下滚动条
  • 少数手机在打开超过20k的测试页面时,会显示内存不足

调试上的小建议

前端开发使用自己手机作为初始测试平台的童鞋们,我建议你们安卓 uc浏览器7.9,这样基本上可以将你高端手机很优雅地变为半高端手机,能测出低端手机常见的bug出来。

一般手机测试我们可以下载一个 Opera Mobile Emulator 来进行模拟,效果比较理想,要注意的就是当前页面的颜色深度, Opera Mobile Emulator 上的颜色深度直接是取电脑上的颜色深度,这个是和真机是不一样的。

然后就是关于手机上测试时令人抓狂的缓存问题,我建议为你修改过的样式文件,js文件给个版本号来减轻缓存的影响。

分类手机前端
标签
阅读 821
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

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

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