meta
约 921 字大约 3 分钟
2021-03-06
meta 信息
| meta | 说明 |
|---|---|
| <!DOCTYPE html> | H5标准声明，使用 HTML5 doctype，不区分大小写 |
| <head lang="en"> | 标准的 lang 属性写法 |
| <meta charset=’utf-8′> | 声明文档使用的字符编码 |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> | 优先使用 IE 最新版本和 Chrome |
| <meta name="description" content="不超过150个字符"/> | 页面描述 |
| <meta name="keywords" content=""/> | 页面关键词 |
| <meta name="author" content="name, email@gmail.com"/> | 网页作者信息 |
| <meta name="robots" content="index,follow"/> | 搜索引擎抓取 |
| <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> | 为移动设备添加 viewport |
| <meta name="apple-mobile-web-app-title" content="标题"> | iOS 设备 begin |
| <meta name="apple-mobile-web-app-capable" content="yes"/> | 添加到主屏后的标题（iOS 6 新增）是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 |
| <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-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="renderer" content="webkit"> | 启用360浏览器的极速模式(webkit) |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | 避免IE使用兼容模式 |
| <meta http-equiv="Cache-Control" content="no-siteapp"/> | 不让百度转码 |
| <meta name="HandheldFriendly" content="true"> | 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 |
| <meta name="MobileOptimized" content="320"> | 微软的老式浏览器 |
| <meta name="screen-orientation" content="portrait"> | uc强制竖屏 |
| <meta name="x5-orientation" content="portrait"> | QQ强制竖屏 |
| <meta name="full-screen" content="yes"> | UC强制全屏 |
| <meta name="x5-fullscreen" content="true"> | QQ强制全屏 |
| <meta name="browsermode" content="application"> | UC应用模式 |
| <meta name="x5-page-mode" content="app"> | QQ应用模式 |
| <meta name="msapplication-tap-highlight" content="no"> | windows phone 点击无高光设置页面不缓存 |
| <meta http-equiv="pragma" content="no-cache"> | pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.) |
| <meta http-equiv="cache-control" content="no-cache"> | Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。 |
| <meta http-equiv="expires" content="0"> | 指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问： Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如：禁止页面在IE中缓存 http响应消息头部设置： CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是个好东东，如果服务器上的网页经常变化，就把它设置为0，表示立即过期 |
viewport说明
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />| 属性 | 说明 |
|---|---|
| width | 设置viewport宽度，为一个正整数，或字符串‘device-width’ |
| device-width | 设备宽度 |
| height | 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 |
| initial-scale | 默认缩放比例（初始缩放比例），为一个数字，可以带小数 |
| minimum-scale | 允许用户最小缩放比例，为一个数字，可以带小数 |
| maximum-scale | 允许用户最大缩放比例，为一个数字，可以带小数 |
| user-scalable | 是否允许手动缩放 |