[HTML5]移动端web页面开发常用的头部标签设置

[HTML5]移动端web页面开发常用的头部标签设置

移动端web页面开发常用的头部标签设置

在移动端web页面开发中，我们常需要设置各种头部标签以帮助浏览器更好的解析页面，将页面完美呈现，这里列出了工作中常用的各种头部标签，以备查询。
viewport

initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。

使用目的：阻止页面缩放

Safari 无效，其他均能阻止页面缩放
safari可以使用以下方法

window.onload = function() {
  document.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {//多触点
      event.preventDefault();//阻止默认缩放
    }
  })
  var lastTouchEnd = 0;
  document.addEventListener('touchend', function(event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault(); //阻止双击放大
    }
    lastTouchEnd = now;
  }, false)
}

ios meta

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

设置添加到主屏后的标题

在web app应用下状态条（屏幕顶部条）的颜色，default（白色）black（黑色） black-translucent（灰色半透明）
若值为"black-translucent"将会占据页面位置（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

忽略页面中的数字识别为电话，忽略email识别

iOS 添加到主屏图标

ios7以前系统默认会对图标添加特效（圆角及高光），如果不希望系统添加特效，则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png

iPhone 和 iTouch，默认 57x57 像素，必须有

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

图标使用的优先级如下：

• 如果没有跟相应设备推荐尺寸一致的图标，会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
• 如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。

iOS 启动画面

iPhone

iPhone Retina

iPhone 5

iPad portrait

iPad landscape

iPad Retina portrait

iPad Retina landscape

其他

DNS预解析

添加 favicon icon

启用360浏览器的极速模式(webkit)

IE使用现有最高版本

不让百度转码

QQ强制竖屏

QQ强制全屏

QQ应用模式

UC强制竖屏

UC强制全屏

UC应用模式

windows phone 点击无高光

搜索引擎抓取
说明：
robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
具体参数如下：
信息参数为all：文件将被检索，且页面上的链接可以被查询；
信息参数为none：文件将不被检索，且页面上的链接不可以被查询；
信息参数为index：文件将被检索；
信息参数为follow：页面上的链接可以被查询；
信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；
信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；