手机wap前端开发经验

对于我们前端来讲，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”

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

标签在部分手机上左侧那小点是默认保留的，而且设置 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>搞笑动漫游戏娱乐原创影视音乐体育
</div>
```
然后第二个问题就是要不要让导航自适应，就是说如果手机屏幕足够大，能否考虑将8个导航文字，一列排过去，但是与ui那边讨论过之后决定使用居左排列2行的形式，即如果屏幕足够大，则会背景向右延伸，但导航文字距离保持不变。

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

这个问题出现在nokia手机上面，页面做出来之后在nokia 5800 s60 v5系统上面发现出来之后整个页面显得很小，320×480分辨率导航文字部分只占到手机屏幕宽度的一半左右，在百思不得其解之后，只好参考其他同类型网站，发觉激动网的 wap版本用了个 viewport 属性，并把页面的初始大小为原来的1.4倍，即
```
 <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完全不支持；
我想说的是在进入实际开发的时候，我发现其实还有一部分的手机不支持 float 属性，超级郁闷！

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

Javascript方面

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

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

其他方面

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

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

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

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

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

转自互联网

手机wap前端开发经验相关推荐

（转）手机网站前端开发经验总结
导读:国内手机网站目前还算是个新鲜事物,相应的手机网站前端开发也并不是特别成熟,对于一个网页设计师来说要做一个手机网站还是会碰到许多问题,本文转载自淘宝 UED,分享如何开发进行手机网站的前端卡发. ...
Java项目：ssm+jsp实现手机WAP版外卖订餐系统
作者主页:夜未央5788 简介:Java领域优质创作者.Java项目.学习资料.技术互助文末获取源码项目介绍这是一款由jsp+ssm框架(spring.springMVC.mybaits)实现的 ...
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码 ...
123房地产行业响应式html5模板二手房源网站模板手机wap页html模板中介推广专题网页模板网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应。
123房地产行业响应式html5模板二手房源网站模板手机wap页html模板中介推广专题网页模板网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅是首 ...
Java项目:手机WAP版外卖订餐系统(java+SSM+jsp+jquery+mysql)
源码获取:博客首页 "资源" 里下载! jsp+ssm框架实现手机WAP版外卖订餐系统项目介绍这是一款由jsp+ssm框架(spring.springMVC.mybaits)实 ...
在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用
这是 Jerry 2021 年的第 26 篇文章,也是汪子熙公众号总共第 297 篇原创文章. 本文绝非标题党. Jerry 前一篇文章 SAP Cloud Application Programmi ...
Jsp+Ssm+Mysql框架实现的手机WAP版外卖点餐系统
此篇给大家分享的是基于jsp+ssm框架(spring.springMVC.mybaits)实现的手机WAP版外卖订餐系统的源码和视频开发教程开发环境: 开发工具:Eclipse JAVA版本:JD ...
响应html广告区分手机pc,typecho博客判断电脑PC和手机WAP端进行广告展示
特别声明:本文为原创,可自由转载.引用,但需署名作者且注明文章出处,如有侵权请联系! 上一篇文章详细介绍了个人网站typecho博客申请添加投放百度联盟广告的具体步骤https://www.zyglz ...
手机Web前端调试页面之——Chrome DevTools（谷歌浏览器）的模拟手机调试
Chrome DevTools(谷歌浏览器)的模拟手机调试前言在客户端开发中,由于使用手机app加载webview页面,客户端与前端经常会出现数据交互情况: 但是在手机中无法调试看到前端代码的步骤 ...

手机wap前端开发经验

手机wap前端开发经验相关推荐

最新文章

热门文章