一、meta基础知识
1. H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
2. 忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
3. 忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no">
4. 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<!-- ios7.0版本以后，safari上已看不到效果 -->
<meta name="apple-mobile-web-app-capable" content="yes">
5. 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<!-- 可选default、black、black-translucent -->
<meta name="app-moblie-web-app-status-bar-style" content="back">
6. winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉？
<meta name="msapplication-tap-highlight" content="no">
二、常见问题
1.移动端如何定义字体font-family
中文字体使用系统默认即可，英文用Helvetica
2. 移动端字体单位font-size选择px还是rem。
对于只需要适配手机设备，使用px即可，对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
3. 移动端touch事件(区分webkit 和 winphone)
当用户手指放在移动设备的屏幕上滑动会触发的touch事件
以下支持webkit：
1) touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
2) touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
3) touchend——当手指离开屏幕时触发
4) touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
4. 移动端click屏幕产生200-300 ms的延迟响应
移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。
解决方案:
1) fastclick可以解决在手机上点击事件的300ms延迟
2) zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
ontouchstart -- ontouchmove -- ontouchend -- onclick
解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应。
5. 在高清显示屏中的位图被放大，图片会变得模糊？
移动端的视觉稿通常会设计为传统PC的2倍。
前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2；
例如图片宽高为：200px*200px，那么写法如下：
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px：
.css{font-size:20px}
6. ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉？
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
a,button,input,textarea { -webkit-tap-highlight-color: rgba(0,0,0,0;) }
7. 部分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标签
参考《如何去除android上a标签产生的边框》
8. webkit表单元素的默认外观怎么重置？
.css{-webkit-appearance:none;}
9. webkit表单输入框placeholder的颜色值能改变么？
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
10. webkit表单输入框placeholder的文字能换行么？
ios可以，android不行~
11. 禁用 select 默认下拉箭头
::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none)
