手机H5移动端WEB资源整合之meta标签
一、相关网站使用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.
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
说明:设定页面使用的字符集
content的内容为:
- GB2312时,代表说明网站是采用的编码是简体中文;
- ISO-8859-1时,代表说明网站是采用的编码是英文;
- UTF-8时,代表世界通用的语言编码;
<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标签的更多相关文章
- web前端-《手机移动端WEB资源整合》——meta标签篇
前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...
- 【超级干货】手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- 手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- 【超级干货】手机移动端WEB资源整合:转载
转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...
- 移动端Web资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- 2014-08-28——移动端web开发,基本Meta标签
1.<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scal ...
- 常见的H5移动端Web页面Bug问题解决方案总汇
解决jquery ajax调用远程接口的跨域问题 首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get ...
- 移动web app 中的meta 标签
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scal ...
- 手机淘宝用JS来动态写meta标签(1像素边框处理方法)
var metaEl = doc.createElement('meta'); var scale = isRetina ? 0.5:1; metaEl.setAttribute('name', 'v ...
随机推荐
- 通信原理之OSI七层参考模型(一)
1.什么是计算机网络 谈计算机通信原理当然离不开计算机网络,那么什么是计算机网络.官方定义:计算机网络是由两台或两台以上的计算机通过网络设备连接起来所组成的一个系统,在这个系统中计算机与计算机之间可以 ...
- switch选择结构
switch( 表达式 )//表达式可以使用byte,short,int,char { case 值1: 逻辑语句: break;//跳出switch语句 case 值2: 逻辑语句; break; ...
- Some reading, some thinking.
update:感谢助教0 0又学会一招,play 了一下CSS Part 1 · Reading Author Article Note Madcola <两年波折路(考研.工作.考研)> ...
- Python3编写网络爬虫10-数据存储方式三-CSV文件存储
3.CSV文件存储 CSV 全称 Comma-Separated Values 中文叫做逗号分隔值或者字符分隔值,文件以纯文本形式存储表格数据.文件是一个字符序列 可以由任意数目的记录组成相当于一个结 ...
- 简单使用Vuex步骤及注意事项
使用Vuex的步骤: (1)安装: 1.使用npm安装: npm install vuex --save 2.使用script标签引入 <script src="/path/to/vu ...
- 描述各自页面的 page
一个小程序页面由四个文件组成(注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名).分别是: 页面 Page(JS文件) Page(Object) 函数用来注册一个页面.接受 ...
- Scrapy中将item字段转为简体or繁体
1. 安装hanziconv安装一个简繁体转换的包: pip install hanziconv 2. 自定义一个itempiples找到项目中的pipelines.py文件 添加自定义的pipeli ...
- webstorm 设置 sass自动编译问题
sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载 : https://rubyinstaller ...
- Python高级网络编程系列之第二篇
在上一篇中,我们深入探讨了TCP/IP协议的11种状态,理解这些状态对我们编写服务器的时候有很大的帮助,但一般写服务器都是使用C/Java语言,因为这些语言对高并发的支持特别好.我们写的这些简单的服务 ...
- 转载 【.NET基础】--委托、事件、线程(3)
之前的两篇文章我们了解了委托和事件,本文我们看一下线程. 1,一个窗体程序,默认拥有一个线程(相当于一个商店里面,只有一个店员),这个默认的线程叫做 UI线程/主线程. 2,进程和线程的关系: A ...