移动前端常用的html5 head标签

1、使用HTML5标准，不区分大小写

2、编码声明

3、语言声明

• 简体中文

• 繁体中文

有时需要加上地区代码，如台湾加上TW：

• 优先使用IE最新版本和Chrome

• 360使用Google Chrome Frame

• 禁止百度转码，可以防止百度贴上各种广告

SEO(Search Engine Optimization，搜索引擎优化)部分###

• 页面标题标签（head头部必须）

• 页面关键词

• 页面描述内容

• 定义网页作者

为移动设备添加viewport###

viewport可以让布局在移动浏览器上显示的更好。常用的content参数：

• width：宽度
• height：高度
• inital-scale:初始缩放比例
• maximum-scale：最大缩放比例
• minimum-scale：最小缩放比例
• user-scalable是否允许用户缩放（yes/no）
  如果网站不是响应式的，不要使用initial-scale或者禁用缩放

viewport通常会写：

适配iphone 6和iphone 6plus需要写：

因为大部分4.7~5寸的安卓设备的viewport宽设为360px，iphone 6上却是375px，大部分安卓机器（比如三星Note）的viewport宽为400px，iPhone 6plus上却是414px。

IOS设备###

• 添加到主屏后的标题（iOS 6新增）

• 是否启用webapp全屏模式

• 设置状态栏的背景颜色(只有在启用webapp为全屏时方才有效，即上个选项为yes)

背景颜色的content参数：

• default 默认值
• black 状态栏背景为黑色
• black-translucent 状态栏背景是黑色半透明。如果设置为default或者black，网页内容从状态栏底部开始。如果设置为black-translucent，网页内容充满整个屏幕，顶部会被状态栏遮挡。
• 禁止数字自动识别为电话号码

iOS图标###

一、rel参数
apple-touch-icon图片会自动处理成为圆角和高光效果。apple-touch-icon-precomposed禁止系统自动添加效果，直接显示设计原图。

• iPhone和iTouch，默认为57*57像素，必须有

• iPad，72*72像素，可以没有，但推荐有

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

• Retina iPad，144*144像素，可以没有，但推荐有

IOS图标大小在iPhone6 Plus上是180180，iPhone 6是120120，适配iPhone6 Plus，则需要加上这段

iOS启动动画###

Android###

chrome 39theme-color meta标签，用来控制选项卡颜色

Windows 8###

• Windows 8磁贴颜色

• Windows 8磁贴图标

• Windows 8磁贴图标

关闭chrome浏览器下的翻译插件###

头部标签总结###

最后是一个广告贴，最近新开了一个分享技术的公众号，欢迎大家关注