博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端web开发 chapter 1 – introduction
阅读量:6978 次
发布时间:2019-06-27

本文共 1014 字,大约阅读时间需要 3 分钟。

移动端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,后续文章敬请期待

转载地址:http://pgypl.baihongyu.com/

你可能感兴趣的文章
Ring Tone Manager on Windows Mobile
查看>>
iOS学习笔记(十三)——获取手机信息(UIDevice、NSBundle、NSLocale)
查看>>
openresty 前端开发入门五之Mysql篇
查看>>
UITableView 添加长按手势UILongPressGestureRecognizer
查看>>
ThinkPHP学习笔记之Model操作
查看>>
改变shell read命令的隔符
查看>>
2016-04-28
查看>>
MySQL编码引发的两个问题
查看>>
Ubuntu“无法获得锁\加锁”解决方案
查看>>
express中的bin/www文件详解
查看>>
Mysql——外键
查看>>
简单使用PDO
查看>>
Linux常用命令大全
查看>>
VIM变IDE
查看>>
Bridge Pattern
查看>>
JSP&Servlet路径问题
查看>>
时间格式枚举
查看>>
高级特性-多线程,GUI
查看>>
android在线播放音乐
查看>>
怎样使一个Android应用不被杀死?(整理)
查看>>