html5 在Android 开发中的应用

这篇文章主要是说明以下几个问题：

1.Android 开发中使用网页的优点和缺点。

2.Android开发中哪些情况适合使用网页，哪些情况不适合使用网页。

3.html5网页与普通网页的区别。

4.Android 开发中使用常规网页和使用html5的区别。

5.html5在Android开发中最常用的两段代码 

Android 开发中使用网页的优点，1.有利于降低开发成本（做网页的成本比Android的低），如果网页的话只需要两个人（一个前端（负责搭界面），一个网站后台（负责写功能），至于android的那个人只是调用网页（学过顶多半个月的android开发的人就能做得很好了）。但是如果不用网页，那对android开发那人的要求就很高了，至少一年独立开发经验，并且这个过程中android开发必须和设计以及后台商量着ui和相应接口的情况。所以从成本上考虑网页至少无论从时间还是经济成本都会少至少一倍。2.网页便于管理，当应用有变化时，只需更换网页就可以，无需发布新的android安装包。如果是android 开发，应用有变化即使是仅更换一个小图标，这种情况也的更新安装包，让用户再次下载。

Android 开发中使用网页的缺点，1.网页的兼容性android上可能存在问题，笔者在开发中就遇到过这样一个问题：当时是支付功能（网页做的），在某些手机上就是无法调用支付，但是在我测试的手机上就很正常。导致兼容性的原因是由于不同的手机厂商都对android系统进行了不同程度的修改，而android开发中使用网页的大多数方法是使用WebView 。所以兼容性就是问题了 。2.网页在处理用户操作比较集中，频繁的情况的用户体验是很差的。

 

既然使用网页的优点和缺点都说明了，在实际开发中，一般都会使用到网页，但是不是全部，只是一部分用网页。在前面的对比中适合使用网页的地方必须有经常改动，展示性强，功能性弱这三个特点，其实在andoid应用中，符合这三个特点的最常见的就是启动页，和介绍页，引导页。最不适合用网页实现的当然就是功能性强，用户交互集中的。类似于支付功能页，相应列表页等。

 

html5与普通网页html的区别，在笔者看来就是html5比html多了很多标签，功能更多。在html中很少有相应视频插件的使用了，因为html5中有一个标签vidio 就可以播放视频了。html5 新增的标签很多，但是在我写的这些文章里只选择可以在移动开发中使用的标签。至于别的标签暂时不会涉及。

 

Android 中使用常规网页会带来的问题：1.常规网页是针对电脑端浏览器写的，所以如果直接加载常规网页，会导致页面效果变形的问题。加载常规网页会使得页面展示性很大程度降低，从而就让网页在android开发中的优点不那么强了。但是使用html5 就可以解决常规网页降低展示性的问题。

 

到现在，相信大家都应该明白html5在Android 开发中有一定重要性的，但是html5 相关东西到底是该android开发者学习，还是前端设计人员掌握，笔者认为，作为合格的以及优秀的android 开发者，得掌握html5与android 开发相关的知识。原因在于前端设计人员的确应该掌握html5，但是html5在android开发中的使用，前端设计人员应该不会知道。所以android 开发者是最能知道html5要解决什么问题的，以及哪些页面用html5 哪些不用是android 开发者心中有数的。而且这部分属于android 与前端的交接处的知识。在笔者看来，真正的android 程序员并不是只要会调用android 提供的编程api 就可以了，如果只是这样，就只能一辈子做所谓的码农，每天就敲着android调用api的代码。很难成长为优秀程序员。优秀程序员是对与android开发相关的边界知识都很清楚的程序员，那时就不再是android 码农，就是笔者认为的真正的软件工程师了。

 

 

 其实,在实际开发中真正用到html5的知识点,绝大部分使用的还是常规网页的知识,html5只是用于解决使用常规网页时布局变乱的问题(至少笔者在用html5时主要是解决这个问题).

在解决常规网页在手机上显示布局变乱的问题之前,笔者认为有必要解释一下出现问题的原因,据笔者了解原因有两点,第一,由于常规网页的显示时默认屏幕尺寸是电脑的,以这种尺寸显示在手机上,自然就会变形.第二.常规网页绘制时的视口默认也是电脑的.在这里可能就会有人问视口是啥意思?其实视口是计算机图形学中的概念，简单说的或它是和具体物理设备对应的一个坐标系，与视口对应的概念是窗口，窗口是与具体物理设备无关的一个坐标系。计算机（包括手机）在绘制图形或文字时，程序里控制的是窗口这个坐标系。在真正绘制的时候会将窗口坐标系上的点转换为视口坐标系的点，然后，图形就显示出来了。

既然原因和概念都已说明了，解决常规网页在手机显示布局变乱的方法已经呼之欲出了。就是设置常规网页显示屏幕尺寸为当前手机尺寸以及设置显示的视口为当前设备对应的视口。只要把这两件事处理了，剩下的就属于css+div（常规网页）布局了。但是具体咋作呢？咋样才能设置尺寸和适口呢?这个问题的答案就是使用html5。html5提供了一些标签属性就可以解决视口和尺寸的问题。

具体就是在html的head标签里，加一个meta标签。

代码如下:

 <meta  name="viewport"  content="width=device-width" >

这样 就可解决视口和尺寸的问题

但是有时还会有别的小问题例如（横竖屏切换时字体大小变化），这问题就是由于网页自动进行缩放了。解决这个问题

就在设置视口的时候再指定别的属性 

 <meta  name="viewport"  content="width=device-width , initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" >

这样就使得网页不会缩放了。

如果网页只用于引导页和介绍页，现在就已经可以了，当然若真想连列表页也用网页仅用上面两种情况还不行，必须结合常规网页的技术，特别是JavaScript ，原因是网页中的各种事件都是通过javascript 来判断的，但是这些知识笔者认为Android工程师就可以不那么精通了，但是必要的基础知识还是需要的，这有利于提高就业的竞争力。