HTML 中的 meta
在前端开发中，一个HTML页面中，head部分会有很多的meta，很大一堆。去掉了这一堆<meta>好像也是对的呀，那它到底是些什么？有什么作用呢？
<meta>标签位于<head></head>之间，用于提供文档相关的信息（W3C）。meta里面的数据以键值对的方式出现，有必选属性content（定义与 http-equiv 或 name 属性相关的元信息，content 属性始终要和 name 属性或 http-equiv 属性一起使用。），以及可选属性name、scheme、http-equiv等。
常见的一些meta：
淘宝的：
<meta charset="gbk">
指定网页字符编码格式。
<meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品，同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务，让你全面安心享受网上购物乐趣！">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> X-UA-Compatible是针对ie8新加的一个设置，而 content="IE=edge"则Windows Internet Explorer 以最高级别的可用模式显示内容。
<meta name="data-spm" content="1">这个还不知道
百度的：
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 告知浏览器文档类型及文字编码。
<meta content="always" name="referrer">还没搞懂
在项目中遇到的一些meta
在移动设备前端开发中，会遇到一个问题，明明在浏览器里很正产的页面，通过手机访问时就感觉不正常，最常见的情况就是字体很小。然后，发现只要加入这样子一个东西就可以正常了。这个东西长这个样子。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
手机屏幕和浏览器屏幕的大小是不同的，所以我们需要告诉浏览器，如果是手机屏幕的话，就需要通过meta标签让当前的viewport的宽度与设别宽度一样。
viewport有六个属性：
| width | 设置layout viewport的宽度，为一个正数 | 例如上面的，width=device-width |
| initial-scale | 设置页面初始缩放值，为一个数字 | 例如上面的 1.0 |
| minimum-scale | 允许用户的最小缩放值，为一个数字 | |
| maximum-scale | 允许用户的最大缩放值，为一个数字 | |
| height | 设置layout viewport的高度，为一个正数 | |
| user-scalable | 是否允许用户缩放，值为no、yes | no不允许，yes允许 |
以上内容来自 http://www.cnblogs.com/2050/p/3877280.html有需要的可以参考该文。
浙公网安备 33010602011771号