移动开发基础

一 移动web的基础知识

 1.meta 标签

<meta name="viewport" content="name=value,name=value">  

 width:设置布局viewport的特定值（“device-width”）；

initial-scale：设置页面的初始缩放；

minimum-scale：最小缩放；

maximum-scale：最大缩放；

user-scalable：用户能否缩放。

2.设计移动web

方案一：根绝设备的实际宽度来设计；

方案二：根据设备的物理像素dp等于抽象像素px来设计。1像素边框和高清图片都不需要额外处理。

二 移动web 布局

方案一：使用弹性盒子flex布局，通过display：flex;然后通过flex:num来实现；

 flex也可用于混合划分，一部分固定宽度，其他不分使用flex。

方案二：使用响应式布局respond

主要是使用媒体查询：

@media screen and (max-width:1024px){
   /*这里是样式*/
}

常用媒体查询的参数：

width/height 视口的宽高

device-width/device-height 设备的宽高

orientation 检查设备处于横屏(landscape)还是竖屏(portrait)

媒体查询存在一定的bug,不能兼容所有ping所以使用

a.百分比布局；

b.弹性图片；

img {
   max-width:100%;
}

c. 重新布局，部分显示，部分隐藏 

特殊样式处理：

一像素边框问题的处理：

通用的方式是通过scaleY(.5)来实现，代码如下：

li {
   /*border-bottom:0.5px solid #ddd;*/
}
li + li:before {
   position:absolute;
   top:-1px;
   left:0;
   content:'';
   width:100%;
   height:1px;
   border-top:1px solid #ddd;
   -webkit-transform:scaleY(.5);
}

相对单位rem

font-size 不建议使用rem,同理一些固定的元素的特性都不建议使用rem;

多行文本溢出：

单行文本溢出，对title类的使用非常多，代码如下：

{
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
}

 多行文本溢出，在详情介绍用的比较多，代码如下：

{
   text-overflow:ellipsis;
   word-break:break-all;
   display:-webkit-box ;
   overflow:hidden;
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
}

三 终端交互优化

 移动web页面的click事件相应要慢300ms,解决300ms延迟，使用tap事件代替click事件，使用移动框架库Zepto.js。

touch事件中的核心事件： touchstart/touchend/touchmove/touchcancel

除常见的事件属性外，触摸事件包含专有的触摸属性，

touches：跟踪触摸操作的touch对象数组；

targetTouches:特定事件目标的touch对象数组；

changeTouches:上次触摸改变的touch对象数组；

touch事件的bug,在Android只会触发一次touch start，一次touchmove,touch end不会触发

解决方案：

在touchmove中加入：event.preventDefaule()可fixedBug,但是会导致默写行为不发生，例如，event.preventDefalut()。

弹性滚动的局部滚动开启,仅限于iOS：

{
   overflow:scroll;
   -webkit-overflow-scrolling:touch;
}

 注意Android不支持原生的弹性滚动，但可以借助第三方库iScroll来实现。滚动的时候GIF图片和定时器都会失效。