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