meta
meta中有這樣幾個常用屬性:http-equiv,name,content,包括html5新增的charset。
注意:content屬性用來存儲meta信息的內容,所有的主流瀏覽器都支持它,但它一般很少單獨使用,我們一般使用http-equiv或name來定義content屬性信息(或值)的名稱,http-equiv和name在一個meta中通常只能用其中一個。
現介紹常用的,再介紹一些其它的。
name常見的有:
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"/>
- width:用於設置視窗口的寬度,可以設置爲device-width(設備的寬度),也可以是自定義的值。
- initial-scale:用於設置縮放比例,可以是任意數值的比例。
- minimum-scale:用於設置最小縮放比例。
- maximum-scale:用於設置最大縮放比例。
- user-scalable:用於設置是否禁止用戶縮放頁面。
自動識別
<meta name="format-detection" content="telphone=no">
- telphone:是否禁止瀏覽器識別頁面中的電話號碼。no:禁止,yes不禁止
- eamil:是否就職瀏覽器識別頁面中的郵件地址。no:禁止,yes不禁止
用http-equiv於模擬一個 HTTP 響應頭
我們都知道,HTML4.0.1定義html文檔的編碼方式是如下面這樣:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
但是在HTML5中我們可以像下面這樣定義:
<meta charset="utf-8">
那麼它除了這樣的使用場景外,還有別的一些嗎。如果你強制刷新頁面,可以駛入像下面這樣的代碼:
<meta http-equiv="refresh" content="3">
如上面的代碼的意思是:強制瀏覽器每3秒刷新一次。但要慎用。
當然,還有一些其他的好用的效果,如果你想要給應用定義多套樣式,然後根據用戶選擇來加載不同的樣式,你可以將http-equiv
設置爲default-style
,然後你設置content的值爲link或style的對應值。具體可參考如下代碼:
<meta http-equiv="default-style" content="s1">
<style title="s1">
body {
background: red;
}
</style>
<style title="s2">
body {
background: green;
}
</style>
以前,我不知道style或link中添加title有什麼用,但上面的例子是它的一個用途。
針對蘋果設備的設置
// 下面代碼來自天貓移動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,用來控制不同瀏覽器的行爲,也可以控制不同搜索引擎的行爲。
其他meta的使用
可參考gethead meta 或 模擬原生IOS效果。
其他的內容可關注我的github