常用的meta标签

 

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

meta标签可分为两大部分:http-equiv和name变量,主要使用场景有以下几种:

 

第一:声明文档使用的字符编码

 <meta charset="utf-8">

 

第二、移动端适配

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 minimal-ui">

width=device-width主要用于ie浏览器以及手机浏览器横竖屏转化,initial-scale主要用于webkit内核浏览器
 iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏

1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位是缩放为100%的CSS的像素)

2、height : 和width相对应,指定高度

3、initial-scale : 初始缩放比例,页面第一次加载时的缩放比例

4、maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0

5、minimum-scale : 允许用户缩放到的最小比例,范围从0到10.0

6、user-scalable : 用户是否可以手动缩放,值可以是:①yes、 true允许用户缩放;②no、false不允许用户缩放

uc强制竖屏

<meta name="screen-orientation" content="portrait"/>

UC强制全屏
<meta name="full-screen" content="yes">
QQ强制竖屏
<meta name="x5-orientation" content="portrait">
是否删除默认的苹果工具栏和菜单栏
<meta name="apple-mobile-web-app-capable" content="yes">
 

第三:SEO优化

1、keywords用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="xxxx">

2、description用来告诉搜索引擎你的网站主要内容。

<meta name="description" content="xxx">

 

第四:强制浏览器使用WebKit内核

强制Chromium内核,作用于360浏览器、QQ浏览器等国产双核浏览器:

<meta name="render" content="webkit"/>

强制Chromium内核,作用于其他双核浏览器:

<meta name="force-rendering" content="webkit"/>

如果有安装 Google Chrome Frame 插件则强制为Chromium内核,否则强制本机支持的最高版本IE内核,作用于IE浏览器:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

 

第五:格式检测

meta name=”format-detection” content=”telephone=no,email=no,adress=no”

telephone,主要作用是是否设置自动将你的数字转化为拨号连接

email,告诉设备不识别邮箱,点击之后不自动发送

adress,跳转至地图

 第六:其他的,比如expires,可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输,Refresh(刷新):自动刷新并指向新页面。

 

原文地址:https://www.cnblogs.com/xldxh/p/15362627.html