移动端web开发 chapter 1 – introduction

简介: <p style="margin-top:0px; margin-bottom:0.8em; padding-top:0px; padding-bottom:0px; border:0px; font-size:16px; vertical-align:baseline; color:rgb(51,51,51); font-family:'Open Sans','Helvetica Neu

移动端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上测试,完美

完美

拿起爱疯

2

再看android

1

2

性能

在pc上,由于高性能的硬件、显卡,使得页面渲染性能很高,而在手机上,受限于有限的硬件资源,当页面出现大量渲染变化的时候,会出现卡顿现象,比如一些复杂动画、很长的列表滚动等。所以针对性的对移动端页面进行性能优化是很有必要的。

动画

由于pc上要考虑ie的兼容性,通常会用js做动画,kissy等库也提供了动画组件,用起来很方便。移动端渲染,还是受限于上一点,js动画,animate(‘left’,xxx)这种,导致页面多次paint,性能较低。移动端动画一般会用css3、canvas、requestAnimationFrame等

调试

pc上的调试有各种开发者工具,移动端相对复杂,可以模拟器调试,也可以真机调试。厂内大部分h5是运行在手淘容器里的,调试起来会麻烦点,后面会有单独一章讲调试。

最后

各位看官要问,这篇文章为啥这么水…..因为是introduction啊o(╯□╰)o,后续文章敬请期待

2

相关文章
|
12天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。
|
23天前
|
Web App开发 前端开发 开发工具
介绍Web开发的基础知识
介绍Web开发的基础知识
25 7
|
1天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
1天前
|
前端开发 数据挖掘 API
使用Python中的Flask框架进行Web应用开发
【4月更文挑战第15天】在Python的Web开发领域,Flask是一个备受欢迎的轻量级Web框架。它简洁、灵活且易于扩展,使得开发者能够快速地构建出高质量的Web应用。本文将深入探讨Flask框架的核心特性、使用方法以及在实际开发中的应用。
|
13天前
|
XML JSON JavaScript
使用JSON和XML:数据交换格式在Java Web开发中的应用
【4月更文挑战第3天】本文比较了JSON和XML在Java Web开发中的应用。JSON是一种轻量级、易读的数据交换格式,适合快速解析和节省空间,常用于API和Web服务。XML则提供更强的灵活性和数据描述能力,适合复杂数据结构。Java有Jackson和Gson等库处理JSON,JAXB和DOM/SAX处理XML。选择格式需根据应用场景和需求。
|
23天前
|
API
2024常用Web支付开发讲解教程
本教程为web支付开发,讲解了最常用的两钟支付:支付宝支付和微信支付,服务器配置和API对接,学完本课程可以学会微信支付、和支付宝支付开发。
17 2
2024常用Web支付开发讲解教程
|
26天前
|
JSON JavaScript 前端开发
移动WEB特效开发
移动WEB特效开发
13 0
|
28天前
|
前端开发 API 网络架构
Python 如何开发出RESTful Web接口,DRF框架助力灵活实现!
Python 如何开发出RESTful Web接口,DRF框架助力灵活实现!
|
28天前
|
应用服务中间件 nginx Docker
简述 Docker 在 Python WEB 开发中的作用。
【2月更文挑战第27天】【2月更文挑战第95篇】简述 Docker 在 Python WEB 开发中的作用。
|
29天前
|
安全 测试技术 API
请描述在 Python WEB 开发中常用的测试方法。
请描述在 Python WEB 开发中常用的测试方法。
15 0