[TOC] ## 概述  ## 常用的meta属性设置 ``` <meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转 <meta name="full-screen" content="yes"> //全屏显示 <meta name="browsermode" content="application"> //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。 <meta name="x5-orientation" content="portrait"> //QQ强制竖屏 <meta name="x5-fullscreen" content="true"> //QQ强制全屏 <meta name="x5-page-mode" content="app"> //QQ应用模式 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> ``` ## 电话号码识别 在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7 位数字，形如：1234567 带括号及加号的数字，形如：(+86)123456789 双连接线的数字，形如：00-00-00111 11 位数字，形如：13800138000 关闭识别 ``` <meta name="format-detection" content="telephone=no" /> ``` 开启识别 ``` <a href="tel:123456">123456</a> ``` ## 邮箱识别（Android） 安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的 meta 来管别邮箱的自动识别： ``` <meta content="email=no" name="format-detection" /> ``` 同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能： ``` <a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a> ``` ## 屏蔽用户选择 禁止用户选择页面中的文字或者图片 ``` div { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ``` ## 清除输入框内阴影 ``` div { -webkit-appearance: none; } ``` ## 设置字体禁止缩放 用户设置字号放大或者缩小导致页面布局错误 ``` body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; } ``` ## android系统中元素被点击时产生边框 ``` a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0) -webkit-user-modify:read-write-plaintext-only; } ```