meta标签含义详细解释！
下面介绍一些有关标记的例子及解释。
一、meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）。
1、http-equiv 属性的 Content-Type 值（显示字符集的设定）
说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。
用法：
|
1 |
|
注意：该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。它可以在同一页面显示中文简体、繁体及其它语言（如日文，韩文）等。
2、name 属性的 viewport 值（移动屏幕的缩放）
也就是可视区域。对于桌面浏览器，我们都很清楚 viewport 是什么，就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。
实际上我们可以操作的属性有 4 个：
width – // viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
height – // viewport 的高度 （范围从 223 到 10,000 ）
initial-scale – // 初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – // 允许用户缩放到的最小比例
maximum-scale – // 允许用户缩放到的最大比例
user-scalable – // 用户是否可以手动缩放 (no，yes)
|
1 |
|
说明：
- 强制让文档与设备的宽度保持 1:1 ；
- 文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
- user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；
注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大响应的 box 也随之放大，导致页面出现错乱问题，解决方法：定义页面的最小宽度
|
1 2 3 |
|
3、name 属性的 format-detection 值（忽略页面中的数字识别为电话号码）
|
1 |
|
说明：
- 使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。
- 若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
4、name 属性的 apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）
|
1 |
|
说明：
- 网站开启对 web app 程序的支持。
- 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。
5、name 属性的 apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）
|
1 |
|
说明：
- 在 web app 应用下状态条（屏幕顶部条）的颜色；
- 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）。
6、name 属性设置作者姓名及联系方式
|
1 |
|
二、苹果 Web App 其他设置：
当然，配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定，如下所示：
|
1 |
|
说明：这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径（图片四）。
使用：
- 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
- 图片尺寸可以设定为 57*57（px）或者 Retina 可以定为 114*114（px），iPad 尺寸为 72*72（px）
|
1 |
|
说明：这个 link 就是设置启动时候的界面。
使用：
- 放置的路径和上面一样。
- 官方规定启动界面的尺寸必须为 320*640（px），原本以为 Retina 屏幕可以支持双倍，但是不支持，图片显示不出来。
如果对 Web App 的这两个 meta 还有不能详细理解的可以查看官方解释：Meta Tags
关于 link 方面还有更多的参数设置（例如：iPod、iPad、iPhone 不同尺寸不同图标），可以查看官方标准文档：Configuring Web Applications
转发自 http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html
meta标签含义详细解释！相关推荐
- meta 标签的详细使用
meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:na ...
- MySQL Explain详解，explain查询结果每列含义详细解释
转自:https://www.cnblogs.com/xuanzhi201111/p/4175635.html MySQL Explain详解 在日常工作中,我们会有时会开慢查询去记录一些执行时间比较 ...
- HTML的meta标签详解
meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <head> <meta http-equiv="co ...
- meta标签清理缓存
//meta标签清理缓存 //如果需要在html页面上设置不缓存,这在<head>标签中加入如下语句:<meta http-equiv="Pragma" cont ...
- 前端工程师所不知道的meta标签用法
http-equiv META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). ★HTTP-EQUIV HTTP-EQUIV类似于HTTP的头部协议 ...
- 网站元数据meta标签的含义和用法
最近在做网页,个人对网站元数据meta标签的含义和用法了解的不是很深,所以在网上搜到了一些关于这方面的知识,并摘抄至此,希望能够与大家共同学习,高手勿喷哦~~~ (注:此文原文内容访问地址:http: ...
- 最齐全的网站元数据meta标签的含义和用法
最齐全的网站元数据meta标签的含义和用法 随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到如今Windows 7.Windows 8的IE9 ...
- 关于Meta标签中format-detection属性及含义
一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...
- HTMl综合各大网站谈谈Meta标签和meta property=og标签含义
看看国内一些网站头部meta的设置: 1.天猫首页 <meta charset="utf-8"/> <meta name="renderer" ...
- MATLAB中var函数，mean函数的含义及用法详细解释
MATLAB中var函数,mean函数的含义及用法详细解释 var函数语句 我们先来看var函数,MATLAB命令窗输入help var ,可以得到用到方差函数Syntax有: V = var(X); ...
最新文章
- Squid部署文档一
- shujufenxi : baichi xiangzhuanqian
- 2020南大计科考研实记（受难三跨）
- 列表和字典循环遍历时的删除问题,集合
- java_函数的概述
- JavaScript变量高级定义之Object.defineProperty()方法讲解
- 5m独享网站服务器,您真的需要独享5m云服务器吗？一文让您了解云服务器带宽计算方法，从此不再花冤枉钱...
- mysql 判断语句_mysql条件判断语句讲解
- 人工智能数学基础---不定积分5：常用不定积分表
- mysql字段描述_详细的MySQL字段类型描述
- c++ 迷宫思路_C++实现简单走迷宫的代码
- android 获得屏幕方向,Android 获取设置屏幕横竖屏
- 表达式的LenB(123程序设计ABC)的值是
- html5 canvas实现高并发视频弹幕功能
- w ndows7防火墙文件名,大神帮你win7系统彻底关闭windows7防火墙的具体方法
- 天才少年George Hotz在自家车库亲手打造了一台无人自驾驶汽车！
- BP神经网络隐层节点的个数设置方法
- windows快速搜索神器everything,让你搜索文件提速百倍！
- 输入一个整数，判断它能否被3、5、7整除，并输出以下信息之一：
- 虚拟机建立游戏服务器,在虚拟机上创建游戏服务器