技术分享 网页前端 查看内容

html5移动端Meta设置

老高 | 发布于 2017-08-14 08:53| 浏览()| 评论() | 收藏()

规定HTML 文档的字符编码

<meta charset="utf-8">

强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览。

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

禁止百度转码显示。

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

WebApp全屏模式 隐藏地址栏。

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

制定iphone中safari顶端的状态条的样式(default:白色,black:黑色,black-translucent:半透明)

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

添加到IOS主屏后的标题。

<meta name="apple-mobile-web-app-title" content="标题名称">
<meta name="format-detection" content="telephone=no" />

format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置:

meta name="format-detection" content="telephone=no"

meta name="format-detection" content="email=no"

meta name="format-detection" content="adress=no" 

也可以连写:meta name="format-detection" content="telephone=no,email=no,adress=no"

下面具体说下每个设置的作用:

一、telephone

你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:

telephone=no就禁止了把数字转化为拨号链接!

telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

二、email

告诉设备不识别邮箱,点击之后不自动发送

email=no禁止作为邮箱地址!

email=yes就开启了把文字默认为邮箱地址,这个meta就不用写了,在默认是情况下就是开启!

三、adress

adress=no禁止跳转至地图!

adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!


发表评论(对文章涉及的知识点还有疑问,可以在这里留言,老高看到后会及时回复的。)

表情
返回顶部