一、相关网站使用meta的实例

youku首页的Meta设置:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" />
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" />
<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />

腾讯网首页的Meta设置:

<meta charset="UTF-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="新闻 新闻中心 事实派 新闻频道,时事报道">
<meta name="description" content="腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
<meta name="author" content="skeetershi" />

二、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的属性:

  • width : 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 content="yes" name="apple-mobile-web-app-capable">

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

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

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

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

说明:忽略页面中的数字识别为电话,忽略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浏览器支持

手机H5移动端WEB资源整合之meta标签的更多相关文章

  1. web前端-《手机移动端WEB资源整合》——meta标签篇

    前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...

  2. 【超级干货】手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  3. 手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  4. 【超级干货】手机移动端WEB资源整合:转载

    转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...

  5. 移动端Web资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  6. 2014-08-28——移动端web开发,基本Meta标签

    1.<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scal ...

  7. 常见的H5移动端Web页面Bug问题解决方案总汇

    解决jquery ajax调用远程接口的跨域问题 首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get ...

  8. 移动web app 中的meta 标签

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scal ...

  9. 手机淘宝用JS来动态写meta标签(1像素边框处理方法)

    var metaEl = doc.createElement('meta'); var scale = isRetina ? 0.5:1; metaEl.setAttribute('name', 'v ...

随机推荐

  1. 关于Natively Compiled Stored Procedures的优化

    Interpreted Transact-SQL stored procedures are compiled at first execution, in contrast to natively ...

  2. 辽宁移动宽带体验及魔百盒M101s-2刷机

    一.背景 坐标:辽宁 某城,移动宽带100M. 设备:移动赠送,华为光猫一只,魔百盒M101s-2电视盒子 一只,据安装人员说这个魔百盒是移动自己开发设计的. 二.上网体验 上网:浏览一般网站没问题. ...

  3. [MapReduce_add_2] MapReduce 实现年度最高气温统计

    0. 说明 编写 MapReduce 程序实现年度最高气温统计 1. 气温数据分析 气温数据样例如下: ++023450FM-+000599999V0202701N015919999999N00000 ...

  4. yolo.h5制作方法

    学习吴恩达的深度学习第三课缺少yolo.h5文件,花了很长时间来解决这个问题. 看到CSDN上各种需要积分下载的yolo.h5文件,实在看不下去了. 从 https://github.com/alla ...

  5. Ubuntu + python pip遇到的问题

    今天在做Flask跨源资源共享(CORS)的时候在安装flask-cors时遇到了两个问题. 首先我是在Ubuntu环境下安装的,整了好一会才弄得出来,现在整理一下. 安装flask-cors pip ...

  6. ccf-20170303--Markdown

    我的想法如下图: 代码和题目如下: 问题描述 试题编号: 201703-3 试题名称: Markdown 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 Markdown 是一 ...

  7. ARC设置

    XCode兼容ARC和非ARC代码的方法 在ARC开发模式下引用非ARC文件或库需进行如下操作以告诉编译器此代码需按照非ARC模式对待: XCode中项目文件->TARGETS->Comp ...

  8. iOS解析XML实现省市区选择

    1.具体内容就不再赘述了.直接看关键代码. viewController.h // // ViewController.h // ParseXmlToRealizeChooseCityDemo // ...

  9. 月球美容计划之最小生成树(MST)

    寒假学的两个算法,普里姆,克鲁斯卡尔最终弄明确了.能够发总结了 先说说普里姆,它的本质就是贪心.先从随意一个点開始,找到最短边,然后不断更新更新len数组,然后再选取最短边并标记经过的点,直到全部的点 ...

  10. Spring AOP 和 AspectJ

    现如今有许多个可用的 AOP 库,使用这些库需要能够回答以下问题: 是否与现有的或新的应用程序兼容? 在哪里可以使用 AOP ? 如何迅速与应用程序集成? 性能开销是多少? 在本文中,我们将回答这些问 ...