移动端Web系列4 -- meta

分类

在介绍移动端特有 meta 标签之前，先简单说一下 HTML meta 标签的一些知识。
meta 标签包含了 HTTP 标题信息(http-equiv) 和页面描述信息(name)。

• http-equiv:
  该枚举的属性定义，可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。
  最常见的大概属于Content-Type了，设置编码类型。如

  H5中可以简化为

  http-equiv常见还有其它如下等（合理使用可增加 SEO 收录）。

  • Content-Language : 设置网页语言
  • Refresh : 指定时间刷新页面
  • set-cookie : 设定页面 cookie 过期时间
  • last-modified : 页面最后生成时间
  • expires : 设置 cache 过期时间
  • cache-control : 设置文档的缓存机制
  • ...

• name:
  该属性定义了文档级元数据的名称。用于对应网页内容，便于搜索引擎查找分类，如 keywords, description; 也可以使用浏览器厂商自定义的 meta， 如 viewport；

移动端特有属性

viewport

可视区域的定义，如屏幕缩放等。告诉浏览器如何规范的渲染网页。

上一章节中已经详细讲解过了，这边就不再重复了。

format-detection

对电话号码的识别

IOS私有属性

apple-mobile-web-app-capable

启用 webapp 模式, 会隐藏工具栏和菜单栏，和其它配合使用。

apple-mobile-web-app-status-bar-style

在webapp模式下，改变顶部状态条的颜色。

default(白色，默认) | black(黑色) | black-translucent(半透明)

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

webapp对应的Link标签

apple-touch-icon

在webapp下，指定放置主屏幕上 icon 文件路径;

默认 iphone 大小为 60px, ipad 为 76px, retina 屏乘2；
如没有一致尺寸的图标，会优先选择比推荐尺寸大，但是最接近推荐尺寸的图标。
ios7以前系统默认会对图标添加特效（圆角及高光），如果不希望系统添加特效，则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png

apple-touch-startup-image

在 webapp 下，设置启动时候的界面;

不支持 size 属性，可以使用 media query 来控制。iphone 和 touch 上，图片大小必须是 230*480 px,只支持竖屏;

其它meta

参见w3cplus

末尾总结

所以，一般新建页面的时候，可以采用如下结构， 再依据自己的实际需要添加所需即可。

文献参考

• MDN meta
• 苹果官方 webapp meta 说明
• IOS Configuring Web Applications
• 移动端重构系列2——新建空白页面