小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端设计师,从事过网站建设,响应式网站开发,网络维护,SEO,SEM,网络推广等前端相关工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云

最新发布

响应式网站head常见meta代码

分类: 响应式网站评论(1)46个赞

添加关键词

<meta name="keywords" content="#" />

添加描述

<meta name="description" content="#" />

IE兼容模式不支持响应式,为了让 IE 浏览器运行最新的渲染模式下,建议将此 <meta> 标签加入到你的页面中

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

不少国产浏览器默认的浏览模式是兼容模式,可以让部分国产浏览器默认采用高速模式渲染页面

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

为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

如果网页采用了响应式网页设计, 不需要经过url自适配跳转就可以根据浏览器的屏幕大小自适应的展现合适的效果,同时适合在移动设备和电脑上进行浏览,在html中加入如下meta:

<meta name="applicable-device"content="pc,mobile">

类似这样的 meta 标签本文档的meta 属性 您将在 5 秒内被重定向到新的地址:

<meta http-equiv="refresh"content="5;url=http://www.bbsxiaomi.com" />

添加作者

<meta name="author" content="作者">

添加版权

<meta name="coprright" content="版权">

添加小图标

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

在SEO中,禁止搜索引擎抓取本页面或者是允许搜索引擎抓取本页面是经常会用到的,为了让搜索引擎禁止抓取本页面,我们一般的做法是在页面的元标记中加入如下的代码:

可以抓取本页,而且可以顺着本页继续索引别的链接

<meta name="robots" content="index,follow">

不许抓取本页,但是可以顺着本页抓取索引别的链接

<meta name="robots" content="noindex,follow">

可以抓取本页,但是不许顺着本页抓取索引别的链接

<meta name="robots" content="index,nofollow">

不许抓取本页,也不许顺着本页抓取索引别的链接。

<meta name="robots" content="noindex,nofollow">

内核控制Meta标签说明,不少国产浏览器默认的浏览模式是兼容模式

若页面需默认用极速核,增加标签:

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

若页面需默认用ie兼容内核,增加标签:

<meta name="renderer" content="ie-comp">

若页面需默认用ie标准内核,增加标签:

<meta name="renderer" content="ie-stand">

清除缓存(再访问这个网站要重新下载!)

<meta http-equiv="cache-control" content="no-cache, must-revalidate">

告诉浏览器和搜索引擎当前页面的语言是中文或者英文

<meta http-equiv="content-language" content="zh-CN">
<meta http-equiv="Content-Language" content="en-US">




常用汇总:

<meta http-equiv="content-language" content="zh-CN">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="applicable-device" content="pc,mobile">
<meta name="renderer" content="webkit">
<meta name="robots" content="index, follow" />
<title>index</title>
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta name="author" content="作者">
<meta name="coprright" content="版权">
<link rel='stylesheet' type="text/css" href="/style/style.css" />
<script type='text/javascript' src="/js/jquery.min.js"></script>


本站内容均为小米原创,转载请注明出处:小米技术社区>> 响应式网站head常见meta代码