• meta标签


    本页面的head标签内的meta元素设置如下:

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="referrer" content="origin">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">

    meta基础知识

    meta指可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部,不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

    分类:meta标签可分为两大部分: http-equiv和name变量。

    1、http-equiv

    http-equiv相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确的显示网页内容。

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

    说明:IE=edge告诉IE 使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

    PS:谷歌添加一个插件:Google Chrome Frame(谷歌内嵌浏览器框架GCF),这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

    <meta http-equiv="content-Type" content="text/html; charset=utf-8">

    说明:设定页面使用的字符集

    content的内容为:

    • GB2312,说明网站采用的编码是简体中文
    • ISO-8859-1,说明网站采用的编码是英文
    • UTF-8,代表世界通用的语言编码

    PS: html5页面直接使用<meta charset="utf-8">

    2、name

    name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要便于搜索引擎机器人查找信息和分类信息用。

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

    说明:H5页面窗口自动调整到设备宽度,并禁止用户缩放页面;

    viewport的属性:

    • viewport的宽度
    • height: viewport的高度
    • initial-scale : 初始的缩放比例
    • minimum-scale : 允许用户缩放到的最小比例
    • maximum-scale : 允许用户缩放到的最大比例
    • user-scalable : 用户是否可以手动缩放
    • target-densitydpi = device-dpi" (android才生效):设备的密度等级
    <meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">

    说明:H5页面窗口宽度为720px(根据设计图稿的尺寸来决定),并禁止用户缩放页面。target-densitydpi针对android手机,其实就是充当缩放的功能。

    target-densitydpi取值:可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。

    当你设target-densitydpi = device-dpi时:

       华为荣耀xx可视区宽度 =  设备宽度 * dpi比值  = 360 * (160/160) = 360

       小米1可视区宽度 =  设备宽度 * dpi比值  = 320 * (240/160) = 480

       联想乐檬可视区宽度 =  设备宽度 * dpi比值  = 360 * (320/160)= 720

       魅蓝可视区宽度 =  设备宽度 * dpi比值  = 432 * (400/160) = 1080

    PS:根据上面的结论,我强烈建议不要使用 target-densitydpi = device-dpi, 因为不同设备上最终的可视区的宽度差异很大,除非你的app有为之做处理(rem、em的相对单位写法)。

    <meta name="apple-mobile-web-app-capable"  content="yes">

    说明:是否启用WebApp全屏模式,删除苹果默认的工具栏和菜单栏。

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    说明:设置苹果工具栏颜色

    <meta name="format-detection" content="telephone=no,email=no">

    说明:忽略页面中的数字识别为电话,忽略email识别。

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

    说明:uc强制竖屏

    <meta name="full-screen" content="yes">

    说明:uc强制全屏

    <meta name="x5-orientation" content="portrait">

    说明:QQ强制竖屏

    <meta name="x5-fullscreen" content="true">

    说明:QQ强制全屏

    <meta name="author" content="dashen" />

    说明:标注网页的作者

    <meta name="keywords" content="新闻,新闻中心, 新闻频道">

    说明:页面关键词,用于被搜索引擎收录

    <meta name="description" content="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">

    说明:页面描述,用于搜索引擎收录

    <meta name="renderer" content="webkit">//默认webkit内核
    <meta name="renderer" content="ie-comp">//默认IE兼容模式
    <meta name="renderer" content="ie-stand">//默认IE标准模式

    说明:指定双核浏览器默认以何种方式渲染页面。

    PS:360浏览器是基于webkit内核和IE内核的双内核浏览器。

    转自:https://www.cnblogs.com/wdlhao/p/8831175.html

  • 相关阅读:
    Linux mysql忘记密码 修改密码 解决方法
    nginx http转https后js,css样式丢失/没显示
    Spring cron 表达式
    Python 学习笔记 -- 装饰器
    Python 学习笔记 -- 一些常用的BIF
    Python 学习笔记 -- 类的一些小知识
    Python 学习笔记 -- 继承与多态(入门级实例)
    Python 基础实战 -- 小游戏之乌龟吃鱼(其实只能看不能玩.....)
    Python 学习笔记 -- 类的访问限制
    Python 学习笔记 -- 类和实例
  • 原文地址:https://www.cnblogs.com/xuepei/p/9397392.html
Copyright © 2020-2023  润新知