移动平台meta标签的定义
2015-08-22 11:14
288 查看
一、meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。
1、http-equiv 属性的 Content-Type 值(显示字符集的设定)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。
注意:该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。
2、name 属性的 viewport 值(移动屏幕的缩放)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
也就是可视区域。对于桌面浏览器,我们都很清楚 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 ;
2.文档最大的宽度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
3.user-scalable 定义用户是否可以手动缩放( no 为不缩放),使页面固定设备上面的大小;
注意:实际测试中发现,有些安卓系统自带的浏览器并不支持这一条规则,能够对页面进行放大,一旦放大响应的 box 也随之放大,导致页面出现错乱问题,解决方法:定义页面的最小宽度
3、name 属性的 format-detection 值(忽略页面中的数字识别为电话号码)
说明:
1.使设备浏览网页时对数字不启用电话功能(不同设备解释不同,iTouch 点击数字为存入联系人,iPhone 为拨打电话),忽略将页面中的数字识别为电话号码。
2.若需要启用电话功能将 telephone=yes 即可,若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
4、name 属性的 apple-mobile-web-app-capable 值(网站开启对 web app 程序的支持)
<meta name="apple-mobile-web-app-capable" content="yes" />
说明:
1.网站开启对 web app 程序的支持。
2.该 meta 可以看出内容为“苹果设备 web 应用程序 xx”,就是说该 meta 是专门定义 web 应用的。
5、name 属性的 apple-mobile-web-app-status-bar-style 值(改变顶部状态条的颜色)
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明:
1.在 web app 应用下状态条(屏幕顶部条)的颜色;
2.默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);
注意:若值为“black-translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px )。
6、name 属性设置作者姓名及联系方式
<meta name="author" contect="yyy, yyy@163.com" />
7.name属性网页描述,给搜索引擎看
说明:
1.meta name="description" content="这里是网页的描述,是给搜索引擎看的,搜索引擎根据这个描述进行收录排名,一般是网页内的关键字。"
2.可以有多个META标签,但是每个META的name不能一样。name="description"是描述的意思。还有name="keywords",(关键字)等等。
8.[b]http-equiv属性文本兼容定义[/b]
说明
1.X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。
2.在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。
注意:以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
二、苹果 Web App 其他设置:
name属性删除默认的苹果工具栏和菜单栏
说明:
这meta的作用就是删除默认的苹果工具栏和菜单栏。
注意:content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
name属性控制状态栏显示样式
总结
<span style="font-size:12px;"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Hello World">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"></span>
1、http-equiv 属性的 Content-Type 值(显示字符集的设定)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。
注意:该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。
2、name 属性的 viewport 值(移动屏幕的缩放)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
也就是可视区域。对于桌面浏览器,我们都很清楚 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 ;
2.文档最大的宽度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
3.user-scalable 定义用户是否可以手动缩放( no 为不缩放),使页面固定设备上面的大小;
注意:实际测试中发现,有些安卓系统自带的浏览器并不支持这一条规则,能够对页面进行放大,一旦放大响应的 box 也随之放大,导致页面出现错乱问题,解决方法:定义页面的最小宽度
body { min-width: 320px; }
3、name 属性的 format-detection 值(忽略页面中的数字识别为电话号码)
<meta name="format-detection" content="telephone=no" />
说明:
1.使设备浏览网页时对数字不启用电话功能(不同设备解释不同,iTouch 点击数字为存入联系人,iPhone 为拨打电话),忽略将页面中的数字识别为电话号码。
2.若需要启用电话功能将 telephone=yes 即可,若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
4、name 属性的 apple-mobile-web-app-capable 值(网站开启对 web app 程序的支持)
<meta name="apple-mobile-web-app-capable" content="yes" />
说明:
1.网站开启对 web app 程序的支持。
2.该 meta 可以看出内容为“苹果设备 web 应用程序 xx”,就是说该 meta 是专门定义 web 应用的。
5、name 属性的 apple-mobile-web-app-status-bar-style 值(改变顶部状态条的颜色)
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明:
1.在 web app 应用下状态条(屏幕顶部条)的颜色;
2.默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);
注意:若值为“black-translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px )。
6、name 属性设置作者姓名及联系方式
<meta name="author" contect="yyy, yyy@163.com" />
7.name属性网页描述,给搜索引擎看
<meta name="description" content="Hello World">
说明:
1.meta name="description" content="这里是网页的描述,是给搜索引擎看的,搜索引擎根据这个描述进行收录排名,一般是网页内的关键字。"
2.可以有多个META标签,但是每个META的name不能一样。name="description"是描述的意思。还有name="keywords",(关键字)等等。
8.[b]http-equiv属性文本兼容定义[/b]
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
说明
1.X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。
2.在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。
注意:以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
二、苹果 Web App 其他设置:
name属性删除默认的苹果工具栏和菜单栏
<meta name="apple-mobile-web-app-capable" content="yes">
说明:
这meta的作用就是删除默认的苹果工具栏和菜单栏。
注意:content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
name属性控制状态栏显示样式
<meta name="apple-mobile-web-app-status-bar-style" content="black">
总结
<span style="font-size:12px;"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Hello World">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"></span>
相关文章推荐
- 让IIS支持WAP的设置方法
- PHP 输出简单动态WAP页面
- JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
- php将html转成wml的WAP标记语言实例
- WAP
- 手机网站重构
- raspberry树莓派 Linux USB无线网卡 连接wpa2无线
- wap博客开发日记(wml)
- wap中文显示
- 笔记本电脑和台式电脑在家里没有装网也可以上网(真后悔现在才看到...,因为我安了网线)
- CSDN 想说爱你不容易
- MMS
- Java 2 Micro Edition简介(四)
- “云+移动互联时代,2014移动平台高峰论坛”隆重举行
- WAP必学档案和绝密考题题
- 请高手指教关于WAP与C#.NET的问题
- 关于动态生成WML文件的一个Java实例(1)
- 关于动态生成WML文件的一个Java实例(2)
- 关于动态生成WML文件的一个Java实例(4)
- symbian中调用系统realplayer打开rtsp链接