移动端web开发 chapter 1 – introduction-阿里云开发者社区

开发者社区> 微个日光日> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
原生开发移动web单页面(step by step)7——页面切换动画
在开始写页面切换效果前,首先要介绍一下css3的animation模块,在css中定义如下 div.a { animation: bounce 0.25s forward; } css3的animation定义可以声明关键名,动画时间,动画插值方式,动画的延迟以及动画完毕后的状态以及动画次数。
935 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13892 0
第121天:移动端开发基本知识
1、HTML5文档结构 注意lang=“zh-CN”表示网页为中文,如果是英文则为lang=“en-CN”。 1 DOCTYPE html> 2 3 4 5 页面标题 6 7 8 9 10 2、浏览器兼容模式 如果网页在IE中打开,必须用最新的引擎渲...
989 0
H5移动前端开发常用高能css3汇总
1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强  html,body{ -webkit-touch-callout: none; //禁止或显示系统默认菜单 -webkit-user-select: none; //禁止长按复制选择 -webki...
731 0
第135天:移动端开发经验总结
一、移动端三种布局   1、有最大、最小宽度的百分比自适应布局   适用场景:门户网站首页,图片较多的首页。   2、百分比自适应布局   适用场景:信息文字较多的网页,内容较多网页。   3、全屏自适应布局   适用场景:单页面网页,移动web app 页面。
1429 0
175
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载