HTML5中常用meta解析

大众机型

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 [数值] 允许缩放的最大比例

完整实例

<meta name="viewport"  content="width=device-width , heigth=device-heigth , user-scalable=no , init-scale=1 . miximum-scale=1 , maximum-scale=1">

http-equiv

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

使用最新版本的IE或chrome浏览器

    <meta charset="UTF-8">

设置网页字符集

<meta name="description" content="不超过150个字符"/>
<meta name="author" content="xxxx@gamil.com"
<meta name="keywords" content=""/>
<meta name="robots" content="index,follow"/>

SEO优化

<meta name="renderer" content="webkit">

让浏览器采用webkit渲染页面

仅IOS支持

开启对web app支持

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

网站开启对web app程序的支持，其实意思就是删除默认的苹果工具栏和菜单栏，开启全屏显示

改变顶部状态条的颜色

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

说明：
- 在 web app 应用下状态条（屏幕顶部条）的颜色；
- 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；

设置“添加到主屏幕图标

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Safari 浏览器有一个“添加到主屏幕”的功能，用户可以像保存书签一样把一个网站添加到主屏幕，下次用户直接点击主屏幕上的图标就能进入网站。
这个功能不仅方便用户快速访问我们的网站，而且也使我们的 WebApp 更像一个原生应用