HTML meta使用

meta標(biāo)簽是什么？

meta標(biāo)簽是HTML語(yǔ)言head區(qū)的一個(gè)輔助性標(biāo)簽。

meta標(biāo)簽是干什么用的？

meta標(biāo)簽用來(lái)描述一個(gè)HTML網(wǎng)頁(yè)文檔的屬性，例如作者、日期和時(shí)間、網(wǎng)頁(yè)描述、關(guān)鍵詞、頁(yè)面刷新等。它提供的信息雖然用戶不可見(jiàn)，但卻是文檔的最基本的 元數(shù)據(jù)。

常用應(yīng)用

1.標(biāo)注作者

<meta name="author"content="網(wǎng)站域名"/>

meta標(biāo)簽在head標(biāo)簽內(nèi)。

2.在瀏覽器中頁(yè)面將以原始大小顯示，并不允許縮放

在使用手機(jī)瀏覽網(wǎng)頁(yè)的時(shí)候，我們可以發(fā)現(xiàn)，瀏覽器會(huì)自動(dòng)將頁(yè)面等比例縮小的屏幕適配的頁(yè)面，同時(shí)我們可以通過(guò)手指來(lái)縮放頁(yè)面。但當(dāng)我們制作移動(dòng)端頁(yè)面時(shí)，這個(gè)功能很顯然已經(jīng)失去意義。所以使用這個(gè)標(biāo)簽可以禁止縮放。

<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

• width:viewport的寬度（范圍從200到10,000，默認(rèn)為980像素）
• height:viewport的高度（范圍從223到10,000）
• initial-scale:初始的縮放比例（范圍從>0到10）
• minimum-scale:允許用戶縮放到的最小比例
• maximum-scale:允許用戶縮放到的最大比例
• user-scalable:用戶是否可以手動(dòng)縮放

此作用針對(duì)手機(jī)端。

3.在瀏覽器中頁(yè)面中出現(xiàn)的手機(jī)號(hào)碼將不以撥號(hào)的超鏈接的形式出現(xiàn)

當(dāng)你寫(xiě)了一串?dāng)?shù)字怎么就變成超鏈接了，點(diǎn)擊還能撥打電話呢。因?yàn)閕Phone會(huì)自動(dòng)把你這個(gè)文字加鏈接樣式，通過(guò)使用這個(gè)標(biāo)簽可以取消這一功能。默認(rèn)是開(kāi)啟狀態(tài)。

<meta name="format-detection"content="telephone=no"/>

4.不識(shí)別頁(yè)面中出現(xiàn)的郵箱

遇上一條同理，告訴設(shè)備不識(shí)別郵箱，點(diǎn)擊之后不自動(dòng)發(fā)送。

<meta name="format-detection" content="email=no"/>

可以聯(lián)合使用：

<meta name="format-detection"content="telephone=no, email=no" />

5.是否啟用 WebApp 全屏模式，刪除蘋(píng)果默認(rèn)的工具欄和菜單欄

<meta name="apple-mobile-web-app-capable"content="yes"/>

6.設(shè)置蘋(píng)果工具欄顏色

apple-mobile-web-app-status-bar-style的content默認(rèn)值為default(白色)，可以定為black(黑色)和black-translucent(灰色半透明)。

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

注意：若值為“black-translucent”將會(huì)占據(jù)頁(yè)面px位置，浮在頁(yè)面上方（會(huì)覆蓋頁(yè)面20px高度–iphone4和itouch4的Retina屏幕為40px）

7.如果把一個(gè)web app添加到了主屏幕中，那么從主屏幕中打開(kāi)這個(gè)web app則全屏顯示

<meta name="apple-touch-fullscreen" content="yes" />

8.可隱藏地址欄，僅針對(duì)IOS的Safari

<meta name="apple-mobile-web-app-capable" content="yes" />

注：IOS7.0版本以后，safari上已看不到效果

9.啟用360瀏覽器的極速模式(webkit)

<meta name="renderer" content="webkit">

10.UC強(qiáng)制全屏

<meta name="full-screen" content="yes">

總結(jié)

以上是生活随笔為你收集整理的HTML meta使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。