近期看到群里对关于 移动端 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
文件。曾经写的touchstarttouchend要改为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





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

最新文章

  1. Linux 平台静默安装 Oracle客户端
  2. mpi4py实践
  3. codevs1138 聪明的质监员
  4. 【循序渐进学Python】10.模块和包
  5. MVC3学习:利用mvc3+ajax实现登录
  6. NodeJS模块的使用
  7. SqlServer_Sql防止注入
  8. Lock锁
  9. javascript设计模式-抽象工厂模式
  10. poj 1733(带权并查集+离散化)
  11. HDU 4513 吉哥系列故事——完美队形II
  12. HDU 5707 Combine String (DP,LCS变形)
  13. 【转】Netty那点事(二)Netty中的buffer
  14. 使用nodeJS实现前端项目自动化之项目构建和文件合并
  15. Python-第三方模块requests快速入手
  16. mongo副本集设置主库权重,永远为主
  17. [z]libevent入门教程:Echo Server based on libevent 不指定
  18. extern C的用法解析
  19. 一步一步写数据结构(BST-二叉排序树)
  20. Sprint第一个冲刺(第四天)

热门文章

  1. jQuery实现多种切换效果的图片切换的五款插件
  2. js中json数据简单处理(JSON.parse()和js中嵌套html)
  3. CAP理论/AP架构/CP架构
  4. 【心情】Priority_queue容器的用法
  5. 【u125】最大子树和
  6. solr源码导入eclipse 分类: H4_SOLR/LUCENCE 2014-07-14 14:11 550人阅读 评论(1) 收藏
  7. mac nginx php-fpm
  8. ios开发事件处理之:五:事件的响应
  9. lower_case_table_names(大小写敏感)
  10. 你的薪水增速跑赢GDP了没