移动端--web开发

最近看到群里对关于 移动端 web开发很是感兴趣，决定写一个关于 移动端的web开发 概念或框架（宝庆对此很是纠结）。也是因为自己一直从事pc 浏览器 web一直对 移动端的不是很重视，所以趁此机会也让自己对 移动端的开发 有个清晰的认识。

环境：

1. 移动端的内核： 手机浏览器的内核是什么  

 

在文章中  Android 手机 采用  Webkit。其他的QQ，UC，飞豚 浏览器都基于此开发的。 而在iOS以及WP7平台上，由于系统封闭，不允许除  系统自带浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均为在Safari或者IE内核的基础上进行二次开发，优化功能和自制UI。

根据

“   各浏览器对HTML5的测试都有了较大提升，但是稳定性依然不足。知名独立IT博客月关博客表示，浏览器对于HTML5的提升并不是一蹴而就的，在这种跑分竞争持续一定时间之后，大多数浏览器厂商还都是会支持全部的新特性。”

 可以看出  Android，IOS， WP7对html5都是支持的，可能具体某个浏览器的程度不一样。

     tips：说到html5，就要提一下css3。在网上搜索了一下，只有一篇文章~ Android平台浏览器CSS3兼容性测试 。 虽然文章比较老，但是在看一些框架源码的时候，也确实看到 针对一些 css3 的js代码。所以对css3的使用还是要小心一点。（特别是QQ浏览器）

    针对上面的情况，我希望大家用一些比较流行和可靠的css 框架。比如：PRUE （这里的 框架 没有 宝庆同学 理解的那么高深和复杂，更多的像 样式库和样式编写的理念~）

开发：

1. 关于 移动端 web 的开发：webkit webApp 开发技术要点总结

这篇文章把概念和基础都说全了~ 请注意文章中的链接（ 指尖下的js ）。

通过这篇文章，我想  click，mouse这类的事件 就不要出现在  移动端 web 的开发中了；

                                  :hover伪类 这样的样式       就不要 出现在  移动端 web 的开发中了；

                                  知道css对于js开发是很重要的，特别是一些组件的开发。

虽然文章写的很好，但是还要注意兼容性问题。之前谈过，特别是css3 的一些问题，还是多测试一下为好。

框架：

1. 针对“自适应页面”，之前看那过一些关于这方面的博客，感觉并不是很难，但是自己写的时候，就不是那么回事了~

         原因：1.    可能是自己的能力和概念理解不够。2    让人无奈的设计。 所以只能用现有的框架来解决问题了~

                  

         好处：1.    统一的框架，能为多人使用，不用看别人写的代码了~ 

                    2.    看看别人写的代码和自己写的做比较，也能提高一下自己。

                    3.    不用纠结一些框架能够解决的问题了~~~ 

2.针对“有复杂交互，一般代码不好解决的页面“，可以使用一些js框架。

        这里推荐 一个 app framework 相对简单和方面点~但这个框架本身也会有些问题。

                   

        对了，针对 移动端 web开发，jquery库的引用~建议使用 app  framework  里面"阉割"后jquery库。

                   要学习 app framework的话：   http://bbs.phonegap100.com/thread-361-1-1.html

图片：

1. mobile web开发中，经常会遇到图片的加载的问题。

主要原因是：1. 为了防止图片失真，图片必须原来的两倍大。

 2. 因为原因1，所以图片无法合并。

 由于以上的原因：mobile中页面，图片 会加载的慢。

解决方法： 将图片 转化为 BASE64 格式。转化工具地址： http://tool.oschina.net/encrypt?type=4

        注意点：转化后的 BASE64 格式，会是一个很长的字符串，不可以将字符串 换行。

兼容性 :

1. 为实现对winphone的支持，引用 微软的hand.js 文件。以前写的touchstart和touchend要改为pointerdown,pointerup。

开发工具：

移动调试-android

对于androi手机我们也可以像电脑上chrome下的开发工具一样看到源码然后调试

看chrome给的官方文档

就是有几个过程

(1) 手机启用usb调试（系统设置 - 开发者选项 - usb调试）//

(2 ) 电脑上的chrome允许usb debug(工具-检查设备-勾选(允许usb debug))

(3) 用数据线连接手机和电脑，在手机上勾选“ Always allow from this computer”

(4) 用手机上的 chrome打开要调试的页面

(5) 在电脑上打开chrome://inspect/#devices 然后点击"inspect"就会出现类似于chrome的开发工具的页面之后就可以调试你手机上打开的页面

tips: 国内打开如果打不开~记得第一次 要链接