html5前端开发基础–html5 meta全解
一、大众机型常用标签的设置
1、name之viewport
<meta name="viewport" content="">说明：屏幕的缩放
content的几个属性：
- width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；
- height – viewport 的高度 （范围从 223 到 10,000 ）
- user-scalable [yes | no]是否允许缩放
- initial-scale [数值] 初始化比例（范围从 > 0 到 10）
- minimum-scale [数值] 允许缩放的最小比例
- maximum-scale [数值] 允许缩放的最大比例
- target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）
— dpi_value 一般是70-400//没英寸像素点的个数
— device-dpi设备默认像素密度
— high-dpi 高像素密度
— medium-dpi 中等像素密度
— low-dpi 低像素密度
完整案例：
- <meta name=“viewport” content=“width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi “>
2、name之format-detection忽略电话号码和邮箱
<meta name=”format-detection” content=”telephone=no”>
说明：忽略页面中的数字识别为电话号码
<meta name=”format-detection” content=”email=no”/>
说明：忽略页面中的邮箱格式为邮箱
也可以写成：
- <meta name=“format-detection” content=“telphone=no, email=no”/>
3、name之设置作者姓名及联系方式
<meta name=”author” contect=”name, xxx@163.com” />
4、其他
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'><!– 优先使用 IE 最新版本和 Chrome –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
<!– 页面描述 –>
<meta name=”description” content=”不超过150个字符”/>
<!– 页面关键词 –>
<meta name=”keywords” content=””/>
<!– 搜索引擎抓取 –>
<meta name=”robots” content=”index,follow”/>
<!– 启用360浏览器的极速模式(webkit) –>
<meta name=”renderer” content=”webkit”>
<!– 避免IE使用兼容模式 –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<!– 不让百度转码 –>
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!– 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 –>
<meta name=”HandheldFriendly” content=”true”>
<!– 微软的老式浏览器 –>
<meta name=”MobileOptimized” content=”320″>
<!– uc强制竖屏 –>
<meta name=”screen-orientation” content=”portrait”>
<!– QQ强制竖屏 –>
<meta name=”x5-orientation” content=”portrait”>
<!– UC强制全屏 –>
<meta name=”full-screen” content=”yes”>
<!– QQ强制全屏 –>
<meta name=”x5-fullscreen” content=”true”>
<!– UC应用模式 –>
<meta name=”browsermode” content=”application”>
<!– QQ应用模式 –>
<meta name=”x5-page-mode” content=”app”>
<!– 添加 RSS 订阅 –>
<link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”/rss.xml”/>
<!– 添加 favicon icon –>
<link rel=”shortcut icon” type=”image/ico” href=”/favicon.ico”/>
<!– sns 社交标签 begin –>
<!– 参考微博API –>
<meta property=”og:type” content=”类型” />
<meta property=”og:url” content=”URL地址” />
<meta property=”og:title” content=”标题” />
<meta property=”og:image” content=”图片” />
<meta property=”og:description” content=”描述” />
<!– sns 社交标签 end –>
<!– Windows 8 磁贴颜色 –>
<meta name=”msapplication-TileColor” content=”#000″/>
<!– Windows 8 磁贴图标 –>
<meta name=”msapplication-TileImage” content=”icon.png”/>
<!– windows phone 点击无高光 –>
<meta name=”msapplication-tap-highlight” content=”no”>
二、ios系统的meta/link设置：
1、开启对web app程序的支持
<meta name=”apple-mobile-web-app-capable” content=”yes”>
说明：
网站开启对web app程序的支持，其实意思就是删除默认的苹果工具栏和菜单栏，全屏播放，开启全屏显示。设置完成后js可以通过访问只读属性window.navigator.standalone（boolean）来判断是否进入webapp展示状态。
2、 改变顶部状态条的颜色；
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
说明：
在 web app 应用下状态条（屏幕顶部条）的颜色；
默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；
3、设置“添加到主屏幕图标
Safari 浏览器有一个“添加到主屏幕”的功能，用户可以像保存书签一样把一个网站添加到主屏幕，下次用户直接点击主屏幕上的图标就能进入网站。
这个功能不仅方便用户快速访问我们的网站，而且也使我们的 WebApp 更像一个原生应用
因为 iOS 分辨率，所以 icon.png 图片的尺寸也各不相同，我们可以通过
sizes属性来分别定义，iOS 系统会自动获取向匹配的图片：
<!-- iOS 图标 begin --><link rel=“apple-touch-icon-precomposed” href=“/apple-touch-icon-57×57-precomposed.png”/>
<!– iPhone 和 iTouch，默认 57×57 像素，必须有 –>
<link rel=“apple-touch-icon-precomposed” sizes=“114×114” href=“/apple-touch-icon-114×114-precomposed.png”/>
<!– Retina iPhone 和 Retina iTouch，114×114 像素，可以没有，但推荐有 –>
<link rel=“apple-touch-icon-precomposed” sizes=“144×144” href=“/apple-touch-icon-144×144-precomposed.png”/>
<!– Retina iPad，144×144 像素，可以没有，但推荐有 –>
<!– iOS 图标 end –></span>
添加到主屏幕后系统会默认给图片加上IOS相关的图标风格（比如圆角），如果需要系统直接展示原图使用apple-touch-icon-precomposed，如果需要系统添加风格使用apple-touch-icon。
扩展：
为用户加上提示
通过添加一个JavaScript代码来邀请用户添加到主屏幕，该库使用了HTML5的本地存储跟踪是否已经显示过了，以避免重复出现。
目前使用比较多和有在更新的一个库来自这里：http://cubiq.org/add-to-home-screen
4、设置桌面图标的标题，
为了在主屏达到最好的显示效果，
title最好限制在六个中文长度内，超长的内容会被隐藏：
- <span style=“font-size:14px;”><meta name=“apple-mobile-web-app-title” content=“标题”></span>
5、设置启动画面
当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好，所以我们需要通过以下代码来自定义启动画面：
- <link rel=“apple-touch-startup-image” href=“Startup.png” />
根据 iOS 设备的分辨率，其启动画面的图片尺寸也各不相同所以：
<!-- iOS 启动画面 begin --><link rel=“apple-touch-startup-image” sizes=“768×1004” href=“/splash-screen-768×1004.png”/>
<!– iPad 竖屏 768 x 1004（标准分辨率） –>
<link rel=“apple-touch-startup-image” sizes=“1536×2008” href=“/splash-screen-1536×2008.png”/>
<!– iPad 竖屏 1536×2008（Retina） –>
<link rel=“apple-touch-startup-image” sizes=“1024×748” href=“/Default-Portrait-1024×748.png”/>
<!– iPad 横屏 1024×748（标准分辨率） –>
<link rel=“apple-touch-startup-image” sizes=“2048×1496” href=“/splash-screen-2048×1496.png”/>
<!– iPad 横屏 2048×1496（Retina） –>
<link rel=“apple-touch-startup-image” href=“/splash-screen-320×480.png”/>
<!– iPhone/iPod Touch 竖屏 320×480 (标准分辨率) –>
<link rel=“apple-touch-startup-image” sizes=“640×960” href=“/splash-screen-640×960.png”/>
<!– iPhone/iPod Touch 竖屏 640×960 (Retina) –>
<link rel=“apple-touch-startup-image” sizes=“640×1136” href=“/splash-screen-640×1136.png”/>
<!– iPhone 5/iPod Touch 5 竖屏 640×1136 (Retina) –>
<!– iOS 启动画面 end –>
或者以下代码，具体没有实践，还需考证
<!!– iPhone SPLASHSCREEN–>
<!link href=”http://wlog.cn/html/”apple-touch-startup-image-320×460.png” media=“(device-width: 320px)” rel=“apple-touch-startup-image” />
<!!– iPhone (Retina) SPLASHSCREEN–>
<!link href=“apple-touch-startup-image-640×920.png” media=“(device-width: 320px) and (-webkit-device-pixel-ratio: 2)” rel=“apple-touch-startup-image” />
<!!– iPad (portrait) SPLASHSCREEN–>
<!link href=“apple-touch-startup-image-768×1004.png” media=“(device-width: 768px) and (orientation: portrait)” rel=“apple-touch-startup-image” />
<!!– iPad (landscape) SPLASHSCREEN–>
<!link href=“apple-touch-startup-image-748×1024.png” media=“(device-width: 768px) and (orientation: landscape)” rel=“apple-touch-startup-image” />
<!!– iPad (Retina, portrait) SPLASHSCREEN–>
<!link href=“apple-touch-startup-image-1536×2008.png” media=“(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)” rel=“apple-touch-startup-image” />
<!!– iPad (Retina, landscape) SPLASHSCREEN–>
<link href=”apple-touch-startup-image-1496×2048.png”media=”(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)”rel=“apple-touch-startup-image” />
6、 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
- <meta name=“apple-itunes-app” content=“app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
比较常用的meta
以下代码参考网址：view-source:三个w点adinnet点cn斜杠service斜杠3d点html
<!--[if lt IE 7 ]><html class="oldie ie ie6"> <![endif]--><!–[if IE 7 ]><html class=”oldie ie ie7″> <![endif]–>
<!–[if IE 8 ]><html class=”ie ie8″> <![endif]–>
<!–[if (gte IE 9)|!(IE)]><!–><html> <!–<![endif]–>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title></title>
<meta name=“keywords” content=“” />
<meta name=“description” content=“” />
<meta name=“title” content=“” />
<meta name=“author” content=“-06” />
<meta name=“Copyright” content=“” />
<!– 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核
================================================== —>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”>
<!– IOS6全屏 Chrome高版本全屏
================================================== —>
<meta name=“apple-mobile-web-app-capable” content=“yes”>
<meta name=“mobile-web-app-capable” content=“yes”>
<!– 让360双核浏览器用webkit内核渲染页面
================================================== —>
<meta name=“renderer” content=“webkit”>
<!– Mobile Specific Metas
================================================== —>
<!– !!!注意 minimal-ui 是IOS7.1的新属性，最小化浏览器UI –>
<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui”>
<meta name=“format-detection” content=“telephone=no”>
<!– CSS
================================================== —>
<link href=“/css/reset.css” rel=“stylesheet” type=“text/css”>
<link href=“/css/magicwall.css” rel=“stylesheet” type=“text/css”>
<link href=“/css/jquery.gridster.css” rel=“stylesheet” type=“text/css”>
<link href=“/css/case.css” rel=“stylesheet” type=“text/css”>
<link href=“/css/case_1280.css” rel=“stylesheet” type=“text/css”>
<link href=“/css/case_1024.css” rel=“stylesheet” type=“text/css”>
<link href=“/css/case_640.css” rel=“stylesheet” type=“text/css”>
<link href=“/css/case_320.css” rel=“stylesheet” type=“text/css”>
<link href=“/css/style_retina.css” rel=“stylesheet” type=“text/css”>
<!–[if lt IE 9]>
<script src=“http://cdn.bootcss.com/html5shiv/r29/html5.js”></script>
<![endif]–>
<!– Favicons
================================================== —>
<link rel=“shortcut icon” href=“favicon.ico” >
<!– Android 主屏图标
================================================== —>
<link rel=“icon” sizes=“196×196” href=“/images/apple-touch-icon-152×152.png”>
<!– IOS 主屏图标
================================================== —>
<link rel=“apple-touch-icon-precomposed” href=“/images/apple-touch-icon-76×76.png”>
<link rel=“apple-touch-icon-precomposed” sizes=“76×76” href=“/images/apple-touch-icon-76×76.png”>
<link rel=“apple-touch-icon-precomposed” sizes=“120×120” href=“/images/apple-touch-icon-120×120.png”>
<link rel=“apple-touch-icon-precomposed” sizes=“152×152” href=“/images/apple-touch-icon-152×152.png”>
<link rel=“apple-touch-startup-image” href=“/startup-748×1024.jpg”
media=“screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)” >
<link rel=“apple-touch-startup-image” href=“/startup-768×1004.jpg”
media=“screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)” >
或者说
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
