---

移动端纯纯纯纯小白一个，单纯做下记录。

---

常用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