移动端--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: 国内打开假设打不开~记得第一次 要链接 vpn

版权声明：本文博主原创文章，博客，未经同意不得转载。