• 常用的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(刷新):自动刷新并指向新页面。

     

  • 相关阅读:
    SVN错误:Attempted to lock an already-locked dir
    DecimalFormat 中的 # 与 0 的区别(中文帮助文档中翻译可能是错误的)
    Logger.getLogger和LogFactory.getLog的区别
    在做excel导出时如何将excel直接写在输出流中
    10 -- 深入使用Spring -- 5... 实现任务的自动调度
    8 -- 深入使用Spring -- 8...2 管理Hibernate的SessionFactory
    8 -- 深入使用Spring -- 8...1 Spring提供的DAO支持
    8 -- 深入使用Spring -- 8... Spring整合Hibernate
    8 -- 深入使用Spring -- 7...4 使用自动装配
    8 -- 深入使用Spring -- 7...3 让Spring管理控制器
  • 原文地址:https://www.cnblogs.com/xldxh/p/15362627.html
Copyright © 2020-2023  润新知