移动端web开发 chapter 1 – introduction
来源:互联网 发布:vmware12安装linux系统 编辑:程序博客网 时间:2024/06/03 21:58
移动端web开发,现在普遍被成为h5开发,这个称谓其实不恰当,不过h5,说起来方便,那就h5吧。虽然都是web开发,区别还是挺多的~以下是po主的总结
布局
pc上,定宽的网站占大多数。而移动端布局绝大部分需要自适应,也就是要适配不同大小的屏幕。同时也多了很多概念,比如viewport,viewport里的各种meta,rem,设备像素比等。
事件
移动端有特有的触摸事件,有时候还要做各种手势处理,设备旋转事件处理等。点击事件click在移动端会有300ms延迟,相应的也有一些处理方案。
兼容性,宿主环境
说起兼容性,pc上总要兼容ie7-11,firefox,chrome,safari吧。移动端似乎很美好,绝大部分是webkit嘛,很开心有木有,各种新特性用的飞起(≧▽≦)/ 。
这方面确实还挺爽,不过测试的时候会发现各种问题,主要是android下。说起来,和android系统版本的碎片化相比,ie6 ie7算个啥,算个啥!
更坑爹的是,我厂很多h5是在手淘里,手淘webview居然用了UC内核
我选择狗带….
软键盘
软键盘是移动端特有的,软键盘弹出的时候,在ios和android上表现并不一样,在不同的ios系统版本也不一样,有些是由于软键盘的弹出压缩了webview高度,从而触发了resize事件,有些则是把整个webview向上顶起了。
在pc上测试,完美
拿起爱疯
再看android
性能
在pc上,由于高性能的硬件、显卡,使得页面渲染性能很高,而在手机上,受限于有限的硬件资源,当页面出现大量渲染变化的时候,会出现卡顿现象,比如一些复杂动画、很长的列表滚动等。所以针对性的对移动端页面进行性能优化是很有必要的。
动画
由于pc上要考虑ie的兼容性,通常会用js做动画,kissy等库也提供了动画组件,用起来很方便。移动端渲染,还是受限于上一点,js动画,animate(‘left’,xxx)这种,导致页面多次paint,性能较低。移动端动画一般会用css3、canvas、requestAnimationFrame等
调试
pc上的调试有各种开发者工具,移动端相对复杂,可以模拟器调试,也可以真机调试。厂内大部分h5是运行在手淘容器里的,调试起来会麻烦点,后面会有单独一章讲调试。
最后
各位看官要问,这篇文章为啥这么水…..因为是introduction啊o(╯□╰)o,后续文章敬请期待
- 移动端web开发 chapter 1 – introduction
- !!!Chapter 1 Introduction
- !!!Chapter 1 Introduction
- !!!Chapter 1 Introduction
- 《ZooKeeper》 Chapter 1 Introduction
- Chapter 1 Introduction
- Chapter 1 Introduction
- Chapter 1 Introduction
- MLaPP Chapter 1 Introduction
- MLaPP Chapter 1 Introduction
- web移动端开发(1)
- Chapter 1. Introduction to Web Automation
- Chapter 1:Introduction to objects
- Chapter 1 - A Tutorial Introduction
- Chapter 1 Introduction to Winsock
- chapter 1 Introduction to objects
- Chapter 1 OSGi Framework Introduction
- Logback手册 Chapter 1: Introduction
- 自定义TabBar的尝试(1)
- 移动web:翻页场景动画(结婚浪漫请柬)
- UML类图简介
- 更新node后,pomelo异常 not a package /usr/local/bin/pomelo
- debug的快捷键
- 移动端web开发 chapter 1 – introduction
- Android使用DrawerLayout创建左右两个抽屉菜单
- Android ClassLoader机制
- java过滤器和监听器详解
- 十六进制、BCD码和十进制的转换
- 字符编码相关
- 最简单的本地缓存方法
- windows64位下使用python2遇到找不到usage init_tcl的问题
- Elasticsearch基础教程