meta标签应用

  • meta标签里的viewport
viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320。
因此我们必须改变viewport，我们就有如下几种属性值可以设置：
width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）
height: viewport 的高度 （范围从 223 到 10,000 ）
initial-scale: 初始的缩放比例 （范围从>0到 10 ）
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放
对于这些属性，我们可以设置其中的一个或者多个，并不需要你同时都设置，iPhone 会根据你设置的属性自动推算其他属性值 ，而非直接采用默认值。
如果你把initial-scale=1 ，那么 width 和 height在竖屏时自动为320*356 （不是320*480 因为地址栏等都占据空间 ），横屏时自动为 480*208。类似地 ，如果你仅仅设置了 width ，就会自动推算出initial-scale 以及height。例如你设置了 width=320 ，竖屏时 initial-scale 就是 1 ，横屏时则变成 1.5 了
那么到底这些设置如何让 Safari 知道 ？其实很简单 ，就一个 meta ，形如 ：
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
  • 微信分享页设置
<meta name="sharecontent" data-msg-img="缩略图地址" data-msg-title="标题" data-msg-content="简介" data-msg-callBack="" data-line-img="缩略图地址" data-line-title="标题" data-line-callBack=""/>
  • QQ分享页设置
<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />
  • 作者
<meta name="author" content="sjzhen,919821148@qq.com">
  • 搜索引擎爬虫重访时间

如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。

<meta name="revisit-after" content="7 days" >
  • 定义搜索引擎爬虫的索引方式
<meta name="robots" content="none">
    1. none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
    2. noindex : 搜索引擎不索引此网页。
    3. nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
    4. all（默认值） : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
    5. index : 搜索引擎索引此网页。
    6. follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
  • refresh(自动刷新并指向某页面)

网页将在设定的时间内，自动刷新并调向设定的网址。

<meta http-equiv="refresh" content="2；URL=http://www.baidu.com/"> //意思是2秒后跳转向百度
  • X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
  • cache-control（指定请求和响应遵循的缓存机制）
<meta http-equiv="cache-control" content="no-cache">

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。

no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）

public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果

private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）

maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒

no-siteapp：用于禁止当前页面在移动端浏览时，被百度自动转码

  • expires（网页到期时间）

用于设定网页的到期时间，过期后网页必须到服务器上重新传输。

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
  • 忽略电话识别和电子邮件识别
<meta name="format-detection" content="telphone=no, email=no" />
  • 其它meta应用
<!-- 启用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">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2020-03-17 01:53  sjzhen  阅读(215)  评论(0)  编辑  收藏  举报