Meta标签 h5
一 PC端meta标签
1 页面关键词
<meta name="keywords" content="your tags">
2 页面描述
<meta name="description" content="150 words">
3 搜索引擎方式:robotterms是一组使用(,)分割的值,通常有如下几种取值:none,noindex,nofollow,index,follow,all
<meta name="robots" content="index,follow"/>
all:文件将被检索,且页面上的连接可以被查询;
none:文件不将被检索,且页面上的连接不可以查询;
index:文件将被检索;
follow:页面上的连接将被查询;
noindex:文件将不被检索;
nofollow:页面上的连接不可以被查询;
4 页面重定向和刷新:content内的数字代表时间 秒,既多长时间后刷新。如果加url则会重新定向到制定网页(搜索引擎能够自动检测,也很容易呗引擎视作误导)
<meta http-equiv="refresh" content="0;url="/>
二 页面缓存设置meta标签——清除缓存
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
三 基础meta标签
1、HTML页面结构
<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’
height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
initial-scale 默认缩放比例,为一个数字,可以带小数
minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
user-scalable 是否允许手动缩放
2 、JS动态判断
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp.$1);
if(version>2.3){ document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">'); }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } } else { document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); }
3、JS动态判断
设置缩放:<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果: <meta name="apple-mobile-web-app-capable" content="yes" />
仅针对IOS的Safari顶端状态条的样式:(可选default/black/black-translucent <meta name="apple-mobile-web-app-status-bar-style" content="black" />
IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别: <meta name="format-detection"content="telephone=no, email=no" />
四 其他meta标签
1 启用360浏览器的急速模式
<meta name="renderer" content="webkit"/>
2 避免IE使用兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
3 针对手持设备优化,主要针对一些老的不识别viewpoint的浏览器比如黑莓
<meta name="HandheldFriendly" content="true">
4 微软老式浏览器
<meta name="MobileOptimized" content="320">
5 UC强制竖屏
<meta name="screen-orientation" content="portrait">
6 QQ强制竖屏
<meta name="x5-orientation" content="portrait">
7 UC强制全屏
<meta name="full-screen" content="yes">
8 QQ强制全屏
<meta name="x5-fullscreen" content="true">
9 UC应用模式
<meta name="browsermode" content="application">
10 QQ应用模式
<meta name="x5-page-mode" content="app">
11 windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">
12 定义网页作者
<meta name="author" content="author name" />
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />
Meta标签 h5的更多相关文章
- h5标签基础 meta标签
<meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/> ,//u ...
- 手机H5移动端WEB资源整合之meta标签
一.相关网站使用meta的实例 youku首页的Meta设置: <meta charset="utf-8"> <meta http-equiv="X-U ...
- H5 meta标签常用写法
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content=" ...
- HTML <meta> 标签,搜索引擎
关于Mate标签的详尽解释,请查看w3school 网址为:http://www.w3school.com.cn/tags/tag_meta.asp meta标签作用 META标签是HTML标记HEA ...
- html meta标签使用总结
meta标签作用 META标签是HTML标记HEAD区的一个关键标签,提供文档字符集.使用语言.作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引擎优化(SEO). PS:便于搜 ...
- 深入理解css系列:meta标签
积累太少,时间管理技巧欠缺,所以导致了博客更新的速度迟缓.学习中成长,成长中学习.加油吧!最近在做h5的项目,对于meta标签层出不穷的各式属性值有点头晕,所以查资料整理了下. 关键字:meta na ...
- 浅析网站开发中的 meta 标签的作用
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- 移动端meta标签整理-备
分类 在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识. meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name). h ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
随机推荐
- MongoDB环境搭建教程收集(待实践)
先收集,后续再实践. https://my.oschina.net/leezhen/blog/207262 http://www.360doc.com/content/11/0708/09/26606 ...
- linux 硬件中断调节
什么是中断 中断interrupts是指硬件主动的来告诉CPU去做某些事情.比如网卡收到数据后可能主动的告诉CPU来处理自己接受到的数据,键盘有了按键输入后会主动告知CPU来读取输入. 硬件主动的打扰 ...
- 使用maven时,如何修改JVM的配置参数;maven命令执行时到底消耗多少内存?
maven是使用java启动的,因此依赖JVM,那么如何修改JVM参数? MAVEN_OPTS 在系统的环境变量中,设置MAVEN_OPTS,用以存放JVM的参数,具体设置的步骤,参数示例如下: MA ...
- 条款三:尽量用new和delete而不用malloc和free
malloc和free(及其变体)会产生问题的原因在于它们太简单:他们不知道构造函数和析构函数. 假设用两种方法给一个包含10个string对象的数组分配空间,一个用malloc,另一个用new: s ...
- Django学习系列之路由系统
一.基于App的路由 作用: 根据App对路由规则进行分类,在全局urls.py包含某个项目的urls.py 示例 定义全局urls.py(全局路由系统) #导入include from django ...
- Vue.js 组件的三个 API:prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- 在 Web 开发中,img 标签用来呈现图片,而且一般来说,浏览器是会对这些图片进行缓存的。
在 Web 开发中,img 标签用来呈现图片,而且一般来说,浏览器是会对这些图片进行缓存的. 比如访问百度,我们可以发现,图片.脚本这种都是从缓存(内存缓存/磁盘缓存)中加载的,而不是再去访问一次百度 ...
- 《转》 Ceilometer项目源代码分析----ceilometer项目源代码结构分析
感谢朋友支持本博客,欢迎共同探讨交流.因为能力和时间有限,错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/gaoxingnengjisua ...
- linux 经常使用网络命令
1. ifconfig ifconfig主要是能手动启动.观察和改动网络接口的相关參数.能改动的參数许多,包含IP參数及MTU等都能改动,他的语法例如以下: [root@linux ~]# ifco ...
- Open Source Computer Vision Library
https://opencv.org/ OpenCV (Open Source Computer Vision Library) is released under a BSD license and ...