移动端总结

css部分

meta标签

viewport

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

IOS中safari允许全屏浏览

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
```	
###	IOS中Safari顶端状态条样式
`<meta name="apple-mobile-web-app-status-bar-style" content="black">`
PS：如果要去除全部的，就把default ：状态栏背景是白色。
black ：状态栏背景是黑色。
black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。
如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
###	忽略将数字变为电话号码
`<meta name="format-detection" content="telephone=no">`
###	忽略识别email
`<meta name="format-detection" content="email=no" >`
###	添加到主屏后的标题（IOS）
`<meta name="apple-mobile-web-app-title" content="标题">`
###	百度禁止转码
`<meta http-equiv="Cache-Control" content="no-siteapp" />`
###	优先使用最新版本 IE 和 Chrome
`<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />`
###	设置缓存
`<meta http-equiv="Cache-Control" content="no-cache" />`
##	小技巧
###	select 下拉选择设置右对齐

select option {
direction: rtl;
}

###	消除 IE10 里面的那个叉号
`input:-ms-clear{display:none;}`
###	关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

###	关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格
可以通过正则去掉
`this.value = this.value.replace(/\u2006/g, '');`
###	移动端 HTML5 input date 不支持 placeholder 问题
`<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">`
###	部分机型存在type为search的input，自带close按钮样式修改方法

#Search::-webkit-search-cancel-button{
display: none;
}

###	开启电话功能和短信和发邮件

123456
123456
<a mailto:dooyoe@gmail.com”>dooyoe@gmail.com

###	IOS Web app启动动画
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
（landscape：横屏 | portrait：竖屏）
###	添加到主屏后的APP图标

###	去除webkit的滚动条

element::-webkit-scrollbar{
display: none;
}

PS：如果要去除全部的，就把 element去掉。
	添加这个属性滚动如丝般顺滑： -webkit-overflow-scrolling : touch;
###	去除button在ios上的默认样式
```	
-webkit-appearance: none;
border-radius: 0;

长时间按住页面出现闪退

element {
	-webkit-touch-callout: none;
}

Retina屏的1px边框

element{
	border-width: thin;
}

transition闪屏

/设置内嵌的元素在 3D 空间如何呈现：保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /
-webkit-backface-visibility:hidden;

旋转屏幕时，字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
	-webkit-text-size-adjust:100%;
}

placeholder元素样式的修改

input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}

不想让按钮 touch时有蓝色的边框或半透明灰色遮罩

对于a,button,input,textarea
-webkit-tap-highlight-color:rgba(0,0,0,0);

移动端做动画效果采用css3

transition、transform（scale、translate、rotate、skew）或者 animation
动画尽量少用margin、top等集合属性，因为这样会触发浏览器重排（reflow）

使用图片时去除图片下4px的空白

img{display:block}；
img{vertical-align:top}

如何禁止保存或拷贝图像（IOS）

img { -webkit-touch-callout: none; }

手机拍照和上传图片

<!-- 选择照片 --> 
<input type=file accept="image/*"> 
<!-- 选择视频 --> 
<input type=file accept="video/*">

弹性盒子的过渡

display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 过渡版本
display:-webkit-flex; // 最新的版本

禁止用户选中文字

-webkit-user-select:none;

定义新的盒模型

box-sizing:border-box

css权重（逐次降低）

style--1000
!important
id--100
class--10
标签--1

使用rem

html {
	font-size: 625%; // 相当于 12px *6.25 = 100px
}
以后的元素的width、height、padding等集合属性都可以用rem来表示。
```		
###	移动端字体
`font-family: Helvetica,sans-serif;`
###	iphone原生键盘统计字数时
在 iphone原生键盘上用 keyup统计字符数时，系统不会自动监控你选择文字的事件，应该使用input事件。
###	毛玻璃效果
实现毛玻璃效果，透过背景看其他元素模糊，自身元素不模糊。

-webkit-backdrop-filter: saturate(180%) blur(20px);
background: rgba(0,0,0,0.5);

###	需要展示小于12px的文字
`transform:scale(%);`
###	禁止IOS弹出各种操作窗口及关闭自动大写与自动修正

-webkit-touch-callout:none

###	Andriod 上去掉语音输入按钮
`input::-webkit-input-speech-button {display: none}`
#	js部分
##	移动端事件
click事件有300ms的延迟
###	触摸事件touch类事件
touchstart：手指触摸到屏幕会触发
touchmove：当手指在屏幕上移动时，会触发
touchend：当手指离开屏幕时，会触发
touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
###	敲击事件tap类事件
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
###	swipe类事件
swipe：手指在屏幕上滑动时会触发
swipeLeft：手指在屏幕上向左滑动时会触发
swipeRight：手指在屏幕上向右滑动时会触发
swipeUp：手指在屏幕上向上滑动时会触发
swipeDown：手指在屏幕上向下滑动时会触发
###	旋转屏幕事件
`onorientationchange`	
###	audio、video默认播放事件
window.onload或计时器等都不能触发播放，必须用 JS写事件让用户手动点击触发才会开始播放

$(document).one(‘touchstart’,function(){
audio.play();
})
```

移动事件三方库

Hammer.JS
FastClick

参考文档：
移动端前端常见的触摸相关事件touch、tap、swipe等整理
web前端 —— 移动端知识的一些总结
移动端事件介绍
移动端web开发技巧
瀑布流框架
倾力总结40条常见的移动端Web页面问题解决方案