meta中有這樣幾個經常使用屬性:http-equiv,name,content,包括html5新增的charset。html
注意:content屬性用來存儲meta信息的內容,全部的主流瀏覽器都支持它,但它通常不多單獨使用,咱們通常使用http-equiv或name來定義content屬性信息(或值)的名稱,http-equiv和name在一個meta中一般只能用其中一個。前端
現介紹經常使用的,再介紹一些其它的。html5
name常見的有:ios
application-name // 表明web應用程序的名字 author // 規定文檔做者的名字 description // 對頁面的描述,SEO須要用到 keywords // 頁面的關鍵字詞,多個用逗號隔開,SEO須要用到
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telphone=no">
咱們都知道,HTML4.0.1定義html文檔的編碼方式是以下面這樣:git
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
可是在HTML5中咱們能夠像下面這樣定義:github
<meta charset="utf-8">
那麼它除了這樣的使用場景外,還有別的一些嗎。若是你強制刷新頁面,能夠駛入像下面這樣的代碼:web
<meta http-equiv="refresh" content="3">
如上面的代碼的意思是:強制瀏覽器每3秒刷新一次。但要慎用。瀏覽器
固然,還有一些其餘的好用的效果,若是你想要給應用定義多套樣式,而後根據用戶選擇來加載不一樣的樣式,你能夠將http-equiv
設置爲default-style
,而後你設置content的值爲link或style的對應值。具體可參考以下代碼:app
<meta http-equiv="default-style" content="s1"> <style title="s1"> body { background: red; } </style> <style title="s2"> body { background: green; } </style>
之前,我不知道style或link中添加title有什麼用,但上面的例子是它的一個用途。ui
// 下面代碼來自天貓移動web <meta name="apple-mobile-web-app-capable" content="yes"/> // 可讓app運行於全屏模式 <meta name="apple-mobile-web-app-title" content="TMALL"/> // 可讓app的標題不一樣於頁標題 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> // 配置app的狀態欄,可設置爲default, black, 和 black-translucent。
狀態欄設置,可參考Changing The iOS Status Bar Of Your Progressive Web App
固然,咱們也能夠設置書籤或者快捷鍵的圖標。可參考以下代碼:
<link href="https://placehold.it/72" sizes="72x72" rel="apple-touch-icon-precomposed">
能夠根據不一樣的型號設備,來設置不一樣的sizes。
也能夠設置它的啓動背景圖。可參考以下代碼:
<link href="https://placehold.it/1496x2048" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image">
固然,咱們也能夠設置其它的meta,用來控制不一樣瀏覽器的行爲,也能夠控制不一樣搜索引擎的行爲。
可參考gethead meta 或 模擬原生IOS效果。
更多的前端相關資源,可關注個人github