整理一下移动端的一些常用的<meta>

Html中的meta标签

什么是meta标签

<meta>标签是HTML语言head区的一个辅助性标签

meta标签的用途

<meta>标签用来描述一个html网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见，但是却是文档的最基本的元数据。

移动端常用<meta>

标注作者信息

1

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

在浏览器中页面将以原始大小显示，不允许缩放

在使用手机浏览网页的时候，我们可以发现，浏览器会自动将页面等比例缩小的屏幕适配的页面，同时我们可以通过手指来缩放页面。但当我们制作移动端页面时，这个功能很显然已经失去意义。所以使用这个标签可以禁止缩放。

1

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

在浏览器中页面中出现的手机号码将不以拨号的超链接的形式出现

当你写了一串数字怎么就变成超链接了，点击还能拨打电话呢。因为iPhone会自动把你这个文字加链接样式，通过使用这个标签可以取消这一功能。默认是开启状态。

1

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

不识别页面中出现的邮箱

遇上一条同理，告诉设备不识别邮箱，点击之后不自动发送

1

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

是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏

1

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

设置苹果工具栏颜色

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

1

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

注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）

如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示

1

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