移动端纯纯纯纯小白一个，单纯做下记录。
常用meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<!--
viewport 视口（可视区窗口）
移动端默认宽度一般 980px
width 可视区宽度 ( number||device-width )
user-scalable ( no||yes )
initial-scale 初始缩放比例 number 事实上改变的是窗口大小
devicePixelRatio 像素比 把一像素放大n倍显示
-->
<!-- 是否删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 其他的meta设置 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<meta name=”format-detection” content=”telephone=no,email=no,adress=no”>
<!--
<a href="tel:110">请拨打电话：110</a>
<a href="mailto:2315496341@qq.com">发送邮件：2315496341@qq.com</a>
telephone
主要作用是是否设置自动将你的数字转化为拨号连接
telephone=no 禁止把数字转化为拨号链接
telephone=yes 开启把数字转化为拨号链接，默认开启
email
告诉设备不识别邮箱，点击之后不自动发送
email=no 禁止作为邮箱地址
email=yes 开启把文字默认为邮箱地址，默认情况开启
adress
adress=no 禁止跳转至地图
adress=yes 开启点击地址直接跳转至地图的功能, 默认开启
-->
input,button 在ios上会有圆角
input, button{
-webkit-appearance: none; /* button 去除系统默认appearance的样式,常用于IOS下移除原生样式 */
border-radius: 0; /* input* /
}
a,input, button 在移动端点击会有阴影
a,input, button{
-webkit-tap-highlight-color: transparent;
/*当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色
如果想取消这个高亮，将值设置为全透明即可*/
}
Font Boosting
- 当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在既不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。
- 设置
height或max-height
点击穿透
- 当上层元素发生点击时，下层元素也有点击事件特性，在300ms后，如果上层元素消失，下层元素的点击行为会被触发。
- 解决：不要混用touch和click
