HTML meta使用
生活随笔
收集整理的這篇文章主要介紹了
HTML meta使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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使用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 制作windows启动盘-大于4GB镜像
- 下一篇: 【今日头条】【抖音火山】前端开发实习生