转载:
　　2018前端面试总结，看完弄懂，工资少说加3K | 掘金技术征文
参考:
　　移动前端开发之viewport的深入理解
<mate>标签: 提供页面的元信息但和内容无关，元数据可以被浏览器、搜索引擎和其他web服务器使用。

mate两种属性：http-equiv和name
　　http-equiv 相当于HTTP头
　　content-type 定义文档的字符集
　　<meta http-equiv="content-Type" content="text/html;charset=utf-8">
　　<meta charset="utf-8">
　　expires网页到期时间
　　<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
　　X-UA-Compatible 浏览器采取何种版本渲染当前页面
　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
　　指定IE和Chrome使用最新版本渲染当前页面
　　cache-control 指定请求和响应遵循的缓存机制
　　refresh 自动刷新，病指向某个页面
　　<meta http-equiv="Refresh" content="2; URL=http://www.root.net">
　　set-cookie 设置cookie
　　<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/">
　　cleartype只对IE有用，用于平滑字体,不推荐使用
　　<!--[if IEMobile]><meta http-equiv="cleartype" content="on"><![endif]-->`
name 描述网页
　　author 作者
　　<meta name="author" content="xx@xx">
　　description 描述，网站主要内容
　　<meta name="description" content="This page is about">
　　keywords 关键字，搜索引擎会使用这些关键字分类
　　<meta name ="keywords" content="science, education">
　　renderer 双核浏览器渲染方式，指定以哪种渲染方式
　　<meta name="renderer" content="webkit">
　　viewport视口，定义设备的大小
　　<meta name="viewport" content="width=device-width,initial-scale=1">
　　HandheldFriendly针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
　　<meta name="HandheldFriendly" content="True">
　　MobileOptimized 微软为IE Mobile版设置的定义宽度标记
　　<meta name="MobileOptimized" content="320">
　　apple-mobile-web-app-capable 是否启动webapp功能（全屏），会删除默认的苹果工具栏和菜单栏。
　　apple-mobile-web-app-capable
　　<meta name="apple-mobile-web-app-capable" content="yes">
　　apple-mobile-web-app-status-bar-style 当启动webapp功能时，手机顶部导航栏的颜色
　　<meta name="apple-mobile-web-app-status-bar-style" content="black">
　　apple-mobile-web-app-title 添加到主屏后的标题
　　<meta name="apple-mobile-we-app-title" content="">
　　format-detection 格式检测，识别页面中的电话号码
　　<meta name="format-detection" content="telephone=no">
　　format-detection 格式检测，识别页面中的email
　　<meta name="format-detection" content="email=no">

viewPort
|属性|作用|
|—-|—–|
|width| 设置layout viewport 的宽度，为一个正整数，或字符串”width-device”|
|initial-scale| 设置页面的初始缩放值，为一个数字，可以带小数|
|minimum-scale| 允许用户的最小缩放值，为一个数字，可以带小数|
|maximum-scale| 允许用户的最大缩放值，为一个数字，可以带小数|
|height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用|
|user-scalable | 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许|

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# H5标准声明，使用 HTML5 doctype，不区分大小写
<!DOCTYPE html>
# 标准的 lang 属性写法
<head lang=”en”>
# 声明文档使用的字符编码
<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=”author” content=”name, email@gmail.com”/>
# 搜索引擎抓取
<meta name=”robots” content=”index,follow”/>
# 为移动设备添加 viewport
<meta name=”viewport” content=”initial-scale=1,
maximum-scale=3, minimum-scale=1, user-scalable=no”>
# iOS 设备 begin
<meta name=”apple-mobile-web-app-title” content=”标题”>
# 添加到主屏后的标题（iOS 6 新增）
<meta name=”apple-mobile-web-app-capable” content=”yes”/>
# 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” 
content=”app-id=myAppStoreID,
 1affiliate-data=myAffiliateData, app-argument=myURL”>
# 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
# 设置苹果工具栏颜色
<meta name=”format-detection” content=”telphone=no, email=no”/>  
# 启用360浏览器的极速模式(webkit)
<meta name=”renderer” content=”webkit”> 
# 避免IE使用兼容模式
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
# 不让百度转码
<meta name=”HandheldFriendly” content=”true”>
# 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
# 微软的老式浏览器
<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”>
设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>