geekman

整  理：晋哲

时  间：2015-12-09

说  明：移动端页面需要注意的细节问题


一、移动端固定<meta>标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

解释：
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

二、细节样式处理，去除移动设备默认交互样式

1、解决 iPhone 横屏时默认会放大文字的问题，设为100%关闭字体大小自动调整功能
html{
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

2、使用无衬线字体
body{font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}

3、禁止选中文本(有无文本选中需求,此为可选项)
html, body{
 -webkit-user-select: none;
 user-select: none;
}

4、快速滚动和回弹的效果
body{-webkit-overflow-scrolling: touch;}

5、禁止长按链接与图片弹出菜单
a, img{-webkit-touch-callout: none;}

6、去除移动端点击事件出现的背景阴影，也可更换颜色
a, input{-webkit-tap-highlight-color:transparent;}
注：还有一种妥协的方法是把页面非真实跳转链接的<a>标签换成其它标签，可以解决这个问题。

7、移动端清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input, textarea{
 border: 0; /* 方法1 */
 -webkit-appearance: none; /* 方法2 */
}

8、输入框点击默认会有蓝色外边框线
input{outline: none;}

三、HTML 代码相关

1、自适应布局模式
在编写CSS时，不建议把容器的宽度、高度定死。为达到适配各种手持设备，建议使用自适应布局模式，保证页面在各类浏览设备上都能够正常的显示，无需再次考虑设备的分辨率。

2、块级化<a>标签，或按需求尽可能扩大<a>标签囊括的范围
在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

3、动画效果中，使用 translate 比使用定位性能高

四、JS 事件相关

1、jQuery文件过大，移动端优先考虑使用zepto.js。实际情况中使用jQuery插件不兼容zepto时再考虑使用jQuery

2、click 事件存在 300ms 的延迟
在手机上绑定 click 事件，会使得操作有 300ms 的延迟，体验并不是很好，通常会使用封装的 tap 事件来代替 click 事件。

五、图片相关

1、使用<img>标签时，需根据实际需求设置[width：100%;]自适应撑满区域，还是设置固定宽高。

2、使用背景图片时，需注意实际用图与移动端呈现尺寸的比例为2:1，所以移动端借助[background-size]属性进行比例缩小，相应的按比例缩小[width]、[height]、[background-position]的值。

3、可以合并的图标图片，尽量整合一张，并进行压缩

4、合并Sprite图时每个图片之间必须留有间距

5、能用CSS样式实现的，代替使用图片

6、较大的背景图片、banner图片等尺寸宽度不需要超过640px，切图时先改变图像大小，再进行压缩。

整    理：徐秀、晋哲

时    间：2015-12-04

说    明：CSS3 Transform基本语法以及基础用法的介绍。

一、名词解释

transform字面上就是变形，改变的意思，包括2D transform和3D transform。在CSS3中transform主要包括以下几种：移动translate()、旋转rotate()、扭曲skew()、缩放scale()以及矩阵变形matrix()，对内联元素(inline)和块级元素(block)都适用。

二、浏览器兼容性
注意：transform是CSS3新属性，目前兼容浏览器【盗图】：

和其它CSS3新属性一样，transform要加兼容前缀。

三、transform-origin属性

transform-origin在元素发生transform变换时有效，是发生变换的基点，以此点建立【2d/3d】坐标。默认值为：transform-origin:50% 50% [0]; 第三个参数是3d转换下z的值，默认0。当改变transform-origin的值时，transform参照基点发生改变，如: transform-origin:0 0;

其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。

四、语法讲解

未经transform转换的div，以下各种变换均以此为参照：

• transform:translate();

通过指定translation(tx,ty)进行矢量偏移，translation3d(tx,ty,tz);参数tx 是x轴方向的偏移矢量，ty 可选参数是y轴方向的偏移矢量。translation3d()中的各值，表示在对应方向的偏移量。tx,ty,tz的取值可以是具体的像素值，也可以是百分比，百分比的的取值相对于自身的宽高。translate(),表示对对象进行平移，当值为负数时，反方向移动物体。分别指定指定轴上的偏移量可以。通过transform-origin属性改变基点。

其它写法：translateX(x)【适用于2d/3d】，translateY(y) 【适用于2d/3d】；translateZ(z) 【适用于3d】，

代码：效果：

• transform:rotate();

通过指定的角度参数对指定元素指定一个rotate(angle)进行2d旋转，rotate3d(rx,ry,rz,angle)进行3d旋转；rx,ry,rz可以取【1：正方向；-1：反方向；0不旋转】；在指定方向选择angle度； angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。可以通过transform-origin属性改变基点。

其它写法：rotateX(angle) 【适用于3d】；rotateY(angle) 【适用于3d】；rotateZ(angle) 【适用于3d】
代码:效果：

• transform:scale();

通过指定scale(sx,sy)的sx、sy参数对指定元素进行2d缩放； scale3d(sx,sy,sz)进行3d缩放。2d缩放的第二个参数可选，未提供，则取与第一个参数一样的值；3d的三个参数都必写，表示在对应方向的缩放比例。可以通过transform-origin对元素的基点进行设置。

其它写法：scaleX(x)【适用于2d/3d】，scaleY(y) 【适用于2d/3d】；scaleZ(z) 【适用于3d】。

代码： 效果：

• transform:skew();
  

通过指定skew(x-angle, y-angle)的x-angle、 y-angle参数对指定元素在指定方向上发生倾斜； skew()没有3d写法；x-angle是水平方向扭曲角度，y-angle可选，是垂直方向扭曲角度。如未设置y-angle，那么Y轴倾斜角度为0deg。

其它写法：skewX(x)【适用于2d】，skewY(y) 【适用于2d】。
代码：效果：

• transform: matrix ();

matrix():2d矩阵包含6个值matrix(a,b,c,d,e,f);3d矩阵包含16个之matrix(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)4*4个值，以上的各种变换(2d/3d),都可以矩阵计算得到相应效果，单计算过程很复杂，此处就不赘述了。有兴趣的小伙伴可以自行学习下。