一些移动端笔记

Touch
1.touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指。
2.touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动。
3.touchend：当手指离开屏幕时触发。
4.touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用。
5触摸事件的响应顺序：
    （1）ontouchstart
    （2）ontouchmove
    （3）ontouchend
    （4）onclick  300ms延时
Event
1.originalEvent （原生事件） 是jquery 封装的事件。
2.targetTouches 目标元素的所有当前触摸 。
3.changedTouches 页面上最新更改的所有触摸。 
4.touches 页面上的所有触摸。

clientX、clientY 相对于当前屏幕的X或Y位置 
pageX、pageY 相对于整体页面的X或Y位置

transitionEnd 过渡结束事件。
animationEnd 动画结束事件

百度禁止转码
<meta http-equiv="Cache-Control" content="no-siteapp" />

关闭电话号码的自动识别：
<meta name="format-detection" content="telephone=no" />
开启电话功能
<a href="tel:123456">123456</a>
开启短信功能：
<a href="sms:123456">123456</a> 

邮箱的自动识别：
<meta content="email=no" name="format-detection" /> 
同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a> 

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。
{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

webkit表单元素的默认外观重置：
.css{-webkit-appearance:none;}

当移动设备横竖屏切换时，文本的大小会重新计算（或者在内嵌浏览器中设置字体的大小），进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
html {-webkit-text-size-adjust: 100%;}

移动端禁止选中内容：
.user-select-none { -webkit-user-select: none;｝

禁止保存或拷贝图像（ios）：
img { -webkit-touch-callout: none; }

摇一摇功能：
HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

android 上去掉语音输入按钮：
input::-webkit-input-speech-button {display: none}

box-sizing：
*,::before,::after{
    -webkit-box-sizing: border-box;

}

1.有最大、最小宽度的百分比自适应布局
适用场景：门户网站首页，图片较多的首页。
2.百分比自适应布局
适用场景：信息文字较多的网页，内容较多网页。
3.全屏自适应布局
适用场景：单页面网页，移动web app 页面。