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">