移动端web开发浅析

1. viewport

① viewport在移动端承载网页的区域：具有默认格式

②设置viewport属性，适配移动端设备

主流设置：

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

主流设置快捷键：meta: vp tab键

name = ”viewport” viewport 设置入口格式

width = device-width 设置viewport宽度与移动设备宽度相同

initial-scale = 1.0 初始化缩放比例与pc端比例为：1比1

user-scalable = 0 是否允许用户自行缩放，可设置值：1,0或者yes,no 0为不允许

如果设置了用户不能自行缩放，那么下面两个参数没有意义

maximum-scale 用户最大缩放比，可设置大于0的数字

minimum-scale 用户最小缩放比，可设置大于0的数字

非主流设置：

参考taobao，判断屏幕尺寸，设置动态设置initial-scale值

2. base.css设置

reset css 重置标签的默认样式代码如下：

*,::before,::after {

padding:0; margin:0;

-webkit-tap-highlight-color: transparent; 移动端特有清除高亮

-webkit-box-sizing: border-box;

box-sizing: border-box; 用两种写法，兼容处理

}

body {

font-size: 14px;

color: #333;

font-family: “MicroSoft YaHei” , “sans-serif”; 这是设备默认样式

}

ul,ol {

list-style: none;

}

a {

text-decoration: none;

color: #333;

}

a: hover {

color: #333;

}

input , textarea {

border: none;

outline: none; 选中时没有边框

resize: none; 不允许用户自行拉伸

-webkit-appearance: none; 清除浏览器给input自带的样式，设置组件默认样式为空

}

.f_left {

float: left;

}

.f_right {

float: right;

}

.clearfix::before,.clearfix::after { 清除浮动

content: ”.”;

line-height: 0;

height: 0;

display: block;

visibility: hidden;

clear: both;

}

3. 设置动态页面的容器div 类名可设为：.layout

.layout {

min-width: 300px; 适配小屏幕设备

max-width: 640px; 设计图的基本格式

}

4. 部分CSS格式说明

①移动端input格式设置，调用输入法时，enter键变为搜索键

<form action="#">

<input type="search" placeholder="请输入"/>

</form>

② position: fixed 设置后定位失效，fixed是以window为基准的

要想实现效果，给fixed元素添加一个子盒子，给子盒子设置min-widht、max-width和margin: 0 auto即可居中;

5. 物理像素，在移动端图片1:1显示可能会出现失真

iPhone 4：2:1 四个物理像素显示1px 压缩图片一倍可显示正常

iPhone 6s plus: 3:1 九个物理像素显示1px 高清屏

6. 基本事件

① touch事件在addEventListener()中添加事件

（1）touchstart事件：手指触摸屏幕触发事件

（2）touchmove事件：手指在屏幕上滑动时连续触发事件

（3）touchend事件：手指离开屏幕触发事件 chrome模拟器在模拟手机touchend时可能会丢失事件，最好将事件绑定在window上

（4）touch的事件对象 event

dom.addEventListener (“touchstart” , function( event ) {

console.log(event);

})

targetTouches：页面上目标元素的所有当前触摸，元素外触摸点不包含

touches：页面上所有的触摸点

changedTouches： 页面上最新更改的所有触摸，在touchend事件中只记录changedTouches，targetTouches和touches都不会被记录

以上三个属性的数据类型都是数组

页面第一个触摸点信息touches[0]：

dom.addEventListener (“touchstart” , function( event ) {

console.log(event.touches[0]);

})

可以根据相关数据获取触摸点的位置

clientX：触摸点在浏览器视口中的X坐标

clientY：触摸点在浏览器视口中的Y坐标

pageX：触摸点在页面中的x坐标

pageY：触摸点在页面中的y坐标

screenX：触摸点在屏幕中的x坐标

screenY：触摸点在屏幕中的y坐标

②过渡结束事件transitionEnd webkitTransitionEnd过渡结束后触发

dom.addEventListener(“transitionEnd” , function( e ){ })

dom.addEventListener(“webkitTransitionEnd” , function( e ){ })

③动画结束事件animationEnd webkitAnimationEnd动画结束后触发

dom.addEventListener(“animationEnd” , function( e ){ })

dom.addEventListener(“webkitAnimationEnd” , function( e ){ })

④ click事件

click事件在移动端有300ms的延迟，在touchend事件之后发生，有300ms延迟所以用户体验并不好

测试代码如下：

dom.addEventListener("touchstart", function () {

console.time("click"); 标记一个时间

console.time("touchend")

});

dom.addEventListener("touchend", function () {

console.timeEnd("touchend"); 计算该标记执行间隔时间

});

dom.addEventListener("click", function () {

console.timeEnd("click"); 计算该标记执行间隔时间

})

封装一个tap事件让点击屏幕150ms内触发，且不触发touchmove事件：

tabb.tap = function (dom, callback) {

if (dom && typeof dom == 'object') {

var isMove = false;

var startTime = 0;

dom.addEventListener('touchstart', function (e) {

startTime = Date.now();

});

dom.addEventListener('touchmove', function (e) {

isMove = true;

});

dom.addEventListener('touchend', function (e) {

if (!isMove && ( Date.now () – startTime ) < 150) {

callback && callback(e);

}

isMove = false; 重置参数

startTime = 0;

});

}

7. zepto.js

使用语法与jQuery基本相同，可理解为轻量化、模块化的jQuery

使用引包增加功能：

（1）包含五个模块 core event form ajax ie

（2）扩展性选择器模块

（3）动画模块

（4）移动端事件模块

8. 响应式开发

媒体媒介media query 设置不同宽度下的样式：and之后一定要加空格

0-768px 移动端显示：

@media screen and（空格）(max-width: 768px){

.container{ width: 100%; background: red };

}

768px-992px 小屏设备显示：

@media screen and (min-width:768px) and (max-width: 992px){

.container{ width: 100%; background: yellow};

}

992px-1200px 中屏设备显示：

@media screen and (min-width:992px) and (max-width: 1200px){

.container{ width: 100%; background: green};

}

1200px- 大屏设备显示：

@media screen and（空格）(min-width: 1200px){

.container{ width: 100%; background: black };

}

9. bootstrap

英文网：http://getbootstrap.com/

中文网：http://www.bootcss.com/

10. 结构性选择器

① “+”号选择器

div + div {} .class + div {}

选择目标元素div或者.class的下一个元素div会被选中

② “~”号选择器

div ~ div {} .class ~ div {}

选择目标元素div或者.class后面的所有同级元素div会被选中

11. 向应式开发后台数据渲染underscore.js