[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; } ```