meta

作者: 小小的白菜 | 来源:发表于2018-09-24 23:13 被阅读0次

    元数据(metadata)是关于数据的信息。标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。典型的情况是,meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

    标签始终位于head元素中。元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

    代码一

    <meta name="renderer" content="webkit|ie-comp|ie-stand">

    等同于下面的代码

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

    强制使用chrome内核浏览或者IE最高版本浏览的代码。如果设置为<meta name="renderer" content="webkit">,则会使用webkit内核进行渲染。

    代码二

    <meta http-equiv="Cache-Control" content="no-siteapp" />

    等同于下面的代码

    <meta http-equiv="Cache-Control" content="no-transform " />
    

    禁止百度转码

    代码三

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

    自适应就是使用相同的网址不考虑用户浏览器UA,向不同设备的用户提供同一套html代码。自适应也叫响应式,可以自动识别屏幕宽度并作出相应调整设计。

    代码四

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

    设置显示宽度和手机屏幕宽度一样,也就是满屏显示。

    代码五

    <meta name="MobileOptimized" content="width"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> 
    
    • width: viewport的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )

    • height: viewport的高度 (范围从 223 到 10,000 )

    • initial-scale: 初始的缩放比例 (范围从>0到 10 )

    • minimum-scale: 允许用户缩放到的最小比例

    • maximum-scale: 允许用户缩放到的最大比例

    • user-scalable: 用户是否可以手动缩放

    代码六
    <!-- 页面标题<title>标签(head 头部必须) -->
    <title>your title</title>
    <!-- 页面关键词 keywords -->
    <meta name="keywords" content="your keywords">
    <!-- 页面描述内容 description -->
    <meta name="description" content="your description">
    <!-- 定义网页作者 author -->
    <meta name="author" content="author,email address">
    <!-- 定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。 -->
    <meta name="robots" content="index,follow">
    

    参考文章

    关于meta标签的几种设置
    meta标签的作用及整理

    相关文章

      网友评论

          本文标题:meta

          本文链接:https://www.haomeiwen.com/subject/bkwcoftx.html