移动前端开发的一些学习笔记

移动前端开发的一些学习笔记

一、移动Web开发和PCWeb开发的不同

MVC三个层面来说:

M:模型层(html)移动web开发一般需要在head中插入很多meta标签,来定制移动开发的样式,比如:

<meta name=”format-detection” content=”telephone=no”>

<!--禁止自动对符合电话格式的文本的格式化显示-->

<meta name=”format-detection” content=”address=no”>

<!--禁止自动对符合地址格式的文本的格式化显示-->

<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no”>

<!--视窗宽度指定为设备支持宽度,禁止缩放-->

V:表现层(css)主要表现在不同移动设备分辨率的适配考虑。

C:控制层(javascript)体现在交互优化、性能优化等

二、性能优化—更快

压缩代码、文件合并、后台直出等方法切实改变响应速度

三、交互优化—更好用

通过替换方案改变用户感知到的响应速度

结合移动设备特点提供更有针对性更好用的体验

四:例子

①绑定click事件,为什么感觉特别迟钝

那是因为移动端的click事件有300ms延迟

为什么移动端要做这种略“脑残”的行为呢?

很多PC页面没有做移动端分辨率兼容→需要放大缩小来浏览→移动端常用放大缩小方案:双击→区分单击双击→设置300ms延迟

最常用的方法:

引入移动端框架如zepto,用tap事件代替click

tap:不是原事件,touchstart\touchmove\touchend

基本条件:

1.从触摸到离开时间间隔短

2.从起点到终点的距离小

点击态:给用户明确的点击反馈,提升用户体验

方案1:使用:active伪类

缺点:滚动的时间也会触发样式

方案2:使用js

做法:点击函数内给目标元素添加样式

②为什么别人的页面滚动起来就是比我流畅?

基本概念

全局滚动 滚动条在body节点或更顶层

局部滚动 滚动条在body下的某一个dom节点上

ios

全局滚动:默认支持(弹性滚动)

局部滚动:默认没有滚动条,且滚动起来干涩

解决:局部滚动使用弹性滚动效果

body{

 -webkit-overflow-scrolling:touch;

}

/* 局部滚动的dom节点*/

.scroll-el{

overflow:auto;

}

建议:将属性挂在body上,可以避免很多奇怪的bug

Android

定制版本比较多,表现各异

默认没有弹性滚动效果

-webkit-overflow-scrolling默认浏览器不支持,Androidchrome支持

流畅滚动的N条军规

1.body上加-webkit-overflow-scrolling:touch

2.ios尽量使用局部滚动

3.ios引进scrollFxi避免出界

4.Android下尽量使用全局滚动

①尽量不用overflowauto

②使用min-height100%代替height100%

5.IOS下带滚动条且positionabsolute的节点不要设置背景色



回复列表



回复操作






发布时间:2016-04-29 17:52:32

修改时间:2016-04-29 17:52:32

查看次数:606

评论次数:4

TA的文章总数

37