近期看到群里对关于 移动端 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
版权声明:本文博主原创文章,博客,未经同意不得转载。