移动平台中 meta 标签的使用
一、meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。
1、http-equiv 属性的 Content-Type 值(显示字符集的设定)
说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。
用法:
1
|
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
注意:该 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
|
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
说明:
- 强制让文档与设备的宽度保持 1:1 ;
- 文档最大的宽度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
- user-scalable 定义用户是否可以手动缩放( no 为不缩放),使页面固定设备上面的大小;
注意:实际测试中发现,有些安卓系统自带的浏览器并不支持这一条规则,能够对页面进行放大,一旦放大响应的 box 也随之放大,导致页面出现错乱问题,解决方法:定义页面的最小宽度
1
2
3
|
body { min-width : 320px ; } |
3、name 属性的 format-detection 值(忽略页面中的数字识别为电话号码)
1
|
< meta name = "format-detection" content = "telephone=no" /> |
说明:
- 使设备浏览网页时对数字不启用电话功能(不同设备解释不同,iTouch 点击数字为存入联系人,iPhone 为拨打电话),忽略将页面中的数字识别为电话号码。
- 若需要启用电话功能将 telephone=yes 即可,若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
4、name 属性的 apple-mobile-web-app-capable 值(网站开启对 web app 程序的支持)
1
|
< meta name = "apple-mobile-web-app-capable" content = "yes" /> |
说明:
- 网站开启对 web app 程序的支持。
- 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”,就是说该 meta 是专门定义 web 应用的。
5、name 属性的 apple-mobile-web-app-status-bar-style 值(改变顶部状态条的颜色)
1
|
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> |
说明:
- 在 web app 应用下状态条(屏幕顶部条)的颜色;
- 默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);
注意:若值为“black-translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px )。
6、name 属性设置作者姓名及联系方式
1
|
< meta name = "author" contect = "liudanyun, liudy102@163.com" /> |
二、苹果 Web App 其他设置:
当然,配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定,如下所示:
1
|
< link rel = "apple-touch-icon-precomposed" href = "iphone_logo.png" /> |
说明:这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径(图片四)。
使用:
- 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
- 图片尺寸可以设定为 57*57(px)或者 Retina 可以定为 114*114(px),iPad 尺寸为 72*72(px)
1
|
< link rel = "apple-touch-startup-image" href = "logo_startup.png" /> |
说明:这个 link 就是设置启动时候的界面。
使用:
- 放置的路径和上面一样。
- 官方规定启动界面的尺寸必须为 320*640(px),原本以为 Retina 屏幕可以支持双倍,但是不支持,图片显示不出来。
如果对 Web App 的这两个 meta 还有不能详细理解的可以查看官方解释:Meta Tags
关于 link 方面还有更多的参数设置(例如:iPod、iPad、iPhone 不同尺寸不同图标),可以查看官方标准文档:Configuring Web Applications
移动平台中 meta 标签的使用的更多相关文章
- 移动平台对 meta 标签的定义
一.meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面 ...
- 移动平台对meta标签的定义
一.meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面 ...
- 移动端 meta 标签笔记
(转自http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html,版权归原作者所有!) 移动平台对 meta 标签的定义 一.meta 标签分 ...
- 最齐全的站点元数据meta标签的含义和使用方法
最齐全的站点元数据meta标签的含义和使用方法 随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到现在Windows 7.Windows 8的I ...
- meta标签
参考:http://www.jb51.net/web/158860.html META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). 一.HTTP标题信息(HTT ...
- Asp.net 后台添加CSS、JS、Meta标签
Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...
- 浏览器内核控制Meta标签说明文档【转】
背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...
- HTML <meta> 标签,搜索引擎
关于Mate标签的详尽解释,请查看w3school 网址为:http://www.w3school.com.cn/tags/tag_meta.asp meta标签作用 META标签是HTML标记HEA ...
- 使用视 meta 标签来控制手机浏览器布局
移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看 ...
随机推荐
- d017: 打印某年某月有几天
内容: 打印某年某月有几天 输入说明: 一行两个整数,前面是年份 后面是月份 输出说明: 一个整数 输入样例: 2009 6 输出样例 : 30 #include <stdio.h> ...
- QT中使用Glut库
用Qt中的QGLWidget窗体类中是不包括glut工具库的,难怪在myGLWidget(在我的程序中是QGLWidget的派生类)中绘制实心球体是说“glutSolidSphere”: 找不到标识符 ...
- [翻译]只为图片使用IMG标签(Use IMG tags only for Images)
原文地址:Use IMG tags only for Images 首先,补充一些背景知识. web开发人员经常通过在主页预加载(预缓存)将来的页面所用到的一些资源的方式来优化网站的性能.常用的手段是 ...
- Sicily shortest path in unweighted graph
题目介绍: 输入一个无向图,指定一个顶点s开始bfs遍历,求出s到图中每个点的最短距离. 如果不存在s到t的路径,则记s到t的距离为-1. Input 输入的第一行包含两个整数n和m,n是图的顶点 ...
- Cracking the coding interview--Q1.2
原文 Implement a function void reverse(char* str) in C or C++ which reverses a null-terminated string. ...
- 对类HelloWorld程序中添加一个MessageBox弹窗
对类HelloWorld程序中添加一个MessageBox弹窗 分析: 任一程序运行的时候都会加载kernel32.dll的,但MessageBoxA()这个API却是在user32.dll中的.所以 ...
- SDL音频播放
gcc -o tutorial03 tutorial03.c -lavutil -lavformat -lavcodec -lz -lm \`sdl-config --cflags --libs` A ...
- Vim--写在开始
这是Vim的学习记录,结合Vim使用技巧一书.
- Create a simple REST web service with Python--转载
今日尝试用python建立一个restful服务. 原文地址:http://www.dreamsyssoft.com/python-scripting-tutorial/create-simple-r ...
- CornerStone 破解 最简单的破解方法
方法一:最近在用cornerstone这个svn的软件感觉非常不错,但是竟然忘了破解,以至于到了14天试用期的最后一天才开始破解, 其实方法很简单,就是修高试用期的天数,找到plist文件把14天改为 ...