HTML meta使用

meta標簽是什么？

meta標簽是HTML語言head區的一個輔助性標簽。

meta標簽是干什么用的？

meta標簽用來描述一個HTML網頁文檔的屬性，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等。它提供的信息雖然用戶不可見，但卻是文檔的最基本的 元數據。

常用應用

1.標注作者

<meta name="author"content="網站域名"/>

meta標簽在head標簽內。

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

在使用手機瀏覽網頁的時候，我們可以發現，瀏覽器會自動將頁面等比例縮小的屏幕適配的頁面，同時我們可以通過手指來縮放頁面。但當我們制作移動端頁面時，這個功能很顯然已經失去意義。所以使用這個標簽可以禁止縮放。

<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，默認為980像素）
• height:viewport的高度（范圍從223到10,000）
• initial-scale:初始的縮放比例（范圍從>0到10）
• minimum-scale:允許用戶縮放到的最小比例
• maximum-scale:允許用戶縮放到的最大比例
• user-scalable:用戶是否可以手動縮放

此作用針對手機端。

3.在瀏覽器中頁面中出現的手機號碼將不以撥號的超鏈接的形式出現

當你寫了一串數字怎么就變成超鏈接了，點擊還能撥打電話呢。因為iPhone會自動把你這個文字加鏈接樣式，通過使用這個標簽可以取消這一功能。默認是開啟狀態。

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

4.不識別頁面中出現的郵箱

遇上一條同理，告訴設備不識別郵箱，點擊之后不自動發送。

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

可以聯合使用：

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

5.是否啟用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄

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

6.設置蘋果工具欄顏色

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

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

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

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

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

8.可隱藏地址欄，僅針對IOS的Safari

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

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

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

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

10.UC強制全屏

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

總結

以上是生活随笔為你收集整理的HTML meta使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。