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" />