移动端长按复制，需要复制的地方变成块状元素 (display:block)
app(如微信)中的webview以及安卓原始浏览器会对scroll滚动判断有延迟
对于顶部的，页面从开始加载的时候就使用position:fixed就不会出现延迟的问题
移动端字体单位font-size选择px还是rem
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备 rem配置参考，适合视觉稿宽度为640px的：
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
使用px前的代码
.btn{display:block;width: 250px;height:42px;line-height:42px;border-radius:5px;text-align:center;font-size:18px;background-color:#04BE02;color:#FFFFFF;margin: 50px;}
使用rem后的代码
.btn{display:block;width: 25rem;height:4.2rem;line-height:4.2rem;border-radius:0.5rem;text-align:center;font-size:1.8rem;background-color:#04BE02;color:#FFFFFF;margin: 5rem;}
移动端touch事件
当用户手指放在移动设备在屏幕上滑动会触发的touch事件,以下支持webkit
- touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
- touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
- touchend——当手指离开屏幕时触发
- touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
TouchEvent
- touches：屏幕上所有手指的信息
- targetTouches：手指在目标区域的手指信息
- changedTouches：最近一次触发该事件的手指信息
- touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息
参数信息(changedTouches[0])
- clientX、clientY在显示区的坐标
- target：当前元素
参考：https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
事件大集合
// 手势事件
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel
// 触摸事件
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend
// 屏幕旋转事件
onorientationchange
// 检测触摸屏幕的手指何时改变方向
orientationchange
// touch事件支持的相关属性
touches
targetTouches
changedTouches
clientX // X coordinate of touch relative to the viewport (excludes scroll offset)
clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX // Relative to the screen
screenY // Relative to the screen
pageX // Relative to the full page (includes scrolling)
pageY // Relative to the full page (includes scrolling)
target // Node the touch event originated from
identifier // An identifying number, unique to each touch event
ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)-webkit-user-modify:read-write-plaintext-only; }
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符,另外，有些机型去除不了，如小米2对于按钮类还有个办法，不使用a或者input标签，直接用div标签.
webkit表单元素的默认外观怎么重置
通用做法如下：
.css{-webkit-appearance:none;}
伪元素改变number类型input框的默认样式
input[type=number]::-webkit-textfield-decoration-container {background-color: transparent;}
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;}
input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;}
webkit表单输入框placeholder的颜色值改变
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
webkit表单输入框placeholder的文字换行
ios可以，android不行~ 在textarea标签下都可以换行~
禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
禁止ios和android用户选中文字
.css{-webkit-user-select:none}
打电话发短信写邮件的实现
打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
写邮件
<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>
取消input在ios下，输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
容器百分百布局带有内边距padding
.css{box-sizing:border-box;-webkit-box-sizing:border-box;}
一行或两行文字溢出省略号
.one{display:block;overflow: hidden;display:-webkit-box;text-overflow: ellipsis;white-space: nowrap; }
.two{display:block;overflow: hidden;display:-webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-height:34px;line-height:16px;}
屏幕旋转事件：onorientationchange
添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）
// 判断屏幕是否旋转
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};};
// 添加事件监听
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
隐藏地址栏 & 处理事件的时候，防止滚动条出现
// 隐藏地址栏 & 处理事件的时候 ，防止滚动条出现
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});
模拟:hover伪类
因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener(’touchstart’, function(){this.className = 'hover';}, false);
myLinks[i].addEventListener(’touchend’, function(){this.className = ';}, false);
}
然后用CSS增加hover效果
a:hover, a.hover { /* 你的hover效果 */ }
定义过渡（在css段中描述keyframes）
@-webkit-keyframes DivZoom
{
0% { -webkit-transform: scale(0.01) }
60% { -webkit-transform: scale(1.05) }
80% { -webkit-transform: scale(0.95) }
100% { -webkit-transform: scale(1.00) }
}
.sZoom { -webkit-animation: DivZoom 0.5s ease-in-out }
定义元素（在<body>段中）：
<div id="layerH" style="-webkit-border-radius:12px; border:2px solid #FFF;-webkit-box-shadow: 0px 2px 4px #888;position: absolute; left: 24px; top: 106px;
width: 256px; height: 268px; padding-left: 8px; padding-right: 8px;color: #FFFFFF; text-shadow: 1px 1px 1px #000; text-align: center;background-color: RGBA(32,48,96,0.9);
background-image:url('BG-Msg.png'); background-repeat:no-repeat;
z-index: 1; visibility: hidden; ">
<p><span style="font-size: 16pt; font-weight: bold">使用说明</span></p>
<hr noshade size="1">
<div id="HelpText" style="height: 120px">说明文字</div>
<hr noshade size="1">
<form name="formV" method="POST">
<input type="button" value="确认" name="B1" style="width: 100%; height: 40px; font-size: 14pt; ont-weight: bold;color: #FFFFFF; text-shadow: 0px -1px 1px #000;"
onclick=" layerH.style.visibility='hidden'">
</form>
</div>
启动动画（在 javascript 定义的函数中）
function pHelp()
{
layerH.style.visibility = 'visible'
layerH.style.cssText = "-webkit-animation-delay: " + Math.random() + "ms"
layerH.className = 'sZoom'
}
(这个启动函数就很好理解了。但是为什么要使用-webkit-animation-delay 这句呢？因为当一个元素过渡显示完成后，若其样式没有变化，下一次将无法进行过渡动画显示。我们巧妙的利用其动画延迟时间定义，使其有所变化，就避免了上述问题。其中使用随机数函数Math.random()，产生一个大于0 小于1 的随机数。当然，延迟零点几毫秒，用户是不会察觉的。)
锁定 viewport
ontouchmove="event.preventDefault()" //锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。
侦测iPhone/iPod
开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.example.com";
}
}
移动端300ms延迟
原因：判断用户是否双击，这个判断时间。
解决方法：在touchend事件执行click事件，并且阻止300ms后的真正click事件触发。
点击延迟300m的原因 解决方法使用FastClick插件
FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。
FastClick 的使用方法非常简单，在 window load 事件之后，在 <body> 上调用 FastClick.attach() 即可。
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
attach() 方法虽可在更具体的元素上调用，直接绑定到 <body> 上可以确保整个应用都能受益。当 FastClick 检测到当前页面使用了基于 标签或者 touch-action 属性的解决方案时，会静默退出。
FastClick缺点是容易忽略保持触摸元素时的css样式的变化，比如:active，:hover。
移动端的事件顺序
事件发生默认顺序
touchstart,touchmove,touchend,click
阻止事件默认顺序发生
e.preventDeault();
事件冒泡顺序 由里到外,阻止事件冒泡
e.stopPropagation()
**判断是否为 iPhone **
function isAppleMobile() {
return (navigator.platform.indexOf('iPad') != -1);
};
解决闪屏
-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；
阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
字体设置rem
rem和em一样也是一个 相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认 1rem=16px; 同理你可以设定
html { font-size:62.5% }
那么1rem就等于10px，以此类推 …
去掉手持设备点击时出现的透明层 （一般会在头部做格式化）
a,button,input{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
在应用了此属性时，链接的 active属性会实效，解决的方法是，在页面unload时运行
document.addEventListener("touchstart", function(){
}, true);
使active状态可用。也可以自已设置自定义的颜色-webkit-tap-highlight-color: 颜色
渐变（这个在做按钮的时候很常用）
element{
background-image: -moz-linear-gradient(top, #2288cc, #389de2); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
}
css横竖屏判断
<link rel=”apple-touch-startup-image” href=”startup.png” /> // 设置开始页面图片
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在设置书签的时候可以显示好看的图标
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 肖像模式样式
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" // 风景模式样式
//竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
//横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>
自动大写与自动修正
<input type="text" autocapitalize="off" autocorrect="off" />
关闭Input键盘默认首字母大写：autocapitalize=”off”
使用特殊链接：
如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接
<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>
或用于单元格：
<td onclick="location.href='tel:122'">
19、关于电量，JPEG最省电（JPEG>PNG>GIF）,图片数量约多，约大约耗电，AJAX动态内容耗电，reflow和repaint耗电，webGL和translate3d耗电
20.常用的插件和库
swipe原理：记录touchstart坐标和touchend坐标，进行比较，得出swipe left或其它。>
tap原理：记录touchstart时间和touchend时间，小于某个值，记为tap。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
iscroll支持缩放（Pinch/Zoom）、拉动刷新（Pull up/down to refresh）、速度和性能提升、精确捕捉元素、自定义滚动条
hammer.js是一款开源的移动端脚本框架，他可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件