移动端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

相关文章
|
17天前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
75 3
|
23天前
|
设计模式 测试技术 持续交付
开发复杂Web应用程序
【10月更文挑战第3天】开发复杂Web应用程序
31 2
|
2天前
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
9 0
|
25天前
|
Java PHP
PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。理解其垃圾回收机制有助于开发高效稳定的PHP应用。
【10月更文挑战第1天】PHP作为广受青睐的服务器端脚本语言,在Web开发中占据重要地位。其垃圾回收机制包括引用计数与循环垃圾回收,对提升应用性能和稳定性至关重要。本文通过具体案例分析,详细探讨PHP垃圾回收机制的工作原理,特别是如何解决循环引用问题。在PHP 8中,垃圾回收机制得到进一步优化,提高了效率和准确性。理解这些机制有助于开发高效稳定的PHP应用。
39 3
|
2月前
|
安全 API 开发者
Web 开发新风尚!Python RESTful API 设计与实现,让你的接口更懂开发者心!
在当前的Web开发中,Python因能构建高效简洁的RESTful API而备受青睐,大大提升了开发效率和用户体验。本文将介绍RESTful API的基本原则及其在Python中的实现方法。以Flask为例,演示了如何通过不同的HTTP方法(如GET、POST、PUT、DELETE)来创建、读取、更新和删除用户信息。此示例还包括了基本的路由设置及操作,为开发者提供了清晰的API交互指南。
100 6
|
2月前
|
存储 JSON API
实战派教程!Python Web开发中RESTful API的设计哲学与实现技巧,一网打尽!
在数字化时代,Web API成为连接前后端及构建复杂应用的关键。RESTful API因简洁直观而广受欢迎。本文通过实战案例,介绍Python Web开发中的RESTful API设计哲学与技巧,包括使用Flask框架构建一个图书管理系统的API,涵盖资源定义、请求响应设计及实现示例。通过准确使用HTTP状态码、版本控制、错误处理及文档化等技巧,帮助你深入理解RESTful API的设计与实现。希望本文能助力你的API设计之旅。
61 3
|
2月前
|
JSON API 数据库
从零到英雄?一篇文章带你搞定Python Web开发中的RESTful API实现!
在Python的Web开发领域中,RESTful API是核心技能之一。本教程将从零开始,通过实战案例教你如何使用Flask框架搭建RESTful API。首先确保已安装Python和Flask,接着通过创建一个简单的用户管理系统,逐步实现用户信息的增删改查(CRUD)操作。我们将定义路由并处理HTTP请求,最终构建出功能完整的Web服务。无论是初学者还是有经验的开发者,都能从中受益,迈出成为Web开发高手的重要一步。
57 4
|
2月前
|
开发框架 JSON 缓存
震撼发布!Python Web开发框架下的RESTful API设计全攻略,让数据交互更自由!
在数字化浪潮推动下,RESTful API成为Web开发中不可或缺的部分。本文详细介绍了在Python环境下如何设计并实现高效、可扩展的RESTful API,涵盖框架选择、资源定义、HTTP方法应用及响应格式设计等内容,并提供了基于Flask的示例代码。此外,还讨论了版本控制、文档化、安全性和性能优化等最佳实践,帮助开发者实现更流畅的数据交互体验。
65 1
|
2月前
|
JSON API 开发者
惊!Python Web开发新纪元,RESTful API设计竟能如此性感撩人?
在这个Python Web开发的新纪元里,RESTful API的设计已经超越了简单的技术实现,成为了一种追求极致用户体验和开发者友好的艺术表达。通过优雅的URL设计、合理的HTTP状态码使用、清晰的错误处理、灵活的版本控制以及严格的安全性措施,我们能够让RESTful API变得更加“性感撩人”,为Web应用注入新的活力与魅力。
48 3
|
2月前
|
SQL 安全 Go
SQL注入不可怕,XSS也不难防!Python Web安全进阶教程,让你安心做开发!
在Web开发中,安全至关重要,尤其要警惕SQL注入和XSS攻击。SQL注入通过在数据库查询中插入恶意代码来窃取或篡改数据,而XSS攻击则通过注入恶意脚本来窃取用户敏感信息。本文将带你深入了解这两种威胁,并提供Python实战技巧,包括使用参数化查询和ORM框架防御SQL注入,以及利用模板引擎自动转义和内容安全策略(CSP)防范XSS攻击。通过掌握这些方法,你将能够更加自信地应对Web安全挑战,确保应用程序的安全性。
81 3