WebApp之Meta标签
<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后,全屏显示 <meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。 <meta name=”apple-mobile-web-app-status-bar-style” content=black” />
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意: 若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。 在iOS中有两个meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
说明: 这个link就是设置web app的放置主屏幕上icon文件路径。
图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px) <meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码 iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" /> <meta content=”yes” name=”apple-mobile-web-app-capable” />该声明是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览。
WebApp之Meta标签的更多相关文章
- html5 webApp常用Meta标签
Html5 webApp常用Meta标签 <meta charset="UTF-8"> <meta name="viewport" conte ...
- WebApp 里Meta标签大全,webappmeta标签大全
1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...
- 移动平台webApp的meta标签-----神奇的功效
对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究 ...
- WebApp 里Meta标签大全
1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...
- 移动平台的WebApp之Meta标签
对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究 ...
- WebApp之Meta标签总结
在做WebApp的时候,少不了Meta标签引用,这里总结了下. <meta name="apple-touch-fullscreen" content="yes&q ...
- 移动webApp必备技能一、WebApp 里Meta标签大全,webappmeta标签大全
1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...
- WebApp之Meta标签 (关闭自动识别数字为电话号码或邮箱之类)
iPhone上的Safari(还有些webkit android手机浏览器)会自动对看起来像是电话号码的数字串(包括已经加入连字符或括号格式化过的)添加电话链接,点击之后会询问用户是否想要拨打该号码. ...
- 移动端Web Meta标签
原文 http://blog.segmentfault.com/jianjian_532633/1190000000654839 添加到推刊 在介绍移动端特有 meta 标签之前,先简单说一下 ...
随机推荐
- Java学习笔记(四)——流程控制语句
一.条件语句 1.if条件语句 (1)语法: if(条件) { 条件成立时的代码 } (2)执行过程 2.if else语句 if(条件) { 条件成立时的代码 } else { 不成立的代码 } 3 ...
- JMeter中的关联-正则表达式提取(2)
JMeter获取正则表达式中的提取的所有关联值的解决方法: 需求如下: { : ", : "results": : [ : : { : : : "total_e ...
- 计数排序-java
今天看了一本书,书里有道题,题目很常见,排序,明了点说: 需求:输入:最多有n个正整数,每个数都小于n, n为107 ,没有重复的整数 输出:按升序排列 思路:假设有一组集合 {1,3,5,6,11, ...
- python装饰器--@property
@property 考察 Student 类: class Student(object): def __init__(self, name, score): self.name = name sel ...
- HDU 4858 项目管理 分块
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4858 题解: 下面说一个插入查询时间复杂度为sqrt(m)的算法: 对每个点定义两个值:val,su ...
- js-变量、作用域和内存问题,引用类型
变量.作用域和内存问题 1.变量可能包含两种不同数据类型的值:基本类型值以及引用类型值:引用类型值保存的是内存中的对象 2.对象是按值传递的, function setName(obj){ obj.n ...
- The Unique MST(次小生成树)
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 22335 Accepted: 7922 Description Give ...
- How to: 使用 数据流 实现生产者-消费者模式
producer把消息发送到消息块,consumer从块读取消息. 安装: Install-Package Microsoft.Tpl.Dataflow using System.Thread ...
- 关于dialog置于底层的问题
我今天开发的一个dialog,引用代码中已有的,发现是居中的 接下来,我要把它置为底部 然后,我的思路就是从dialog的view设置入手,还用了setgravity,最后还是不成功 所以,后来,我休 ...
- WPF文字排列方式解析zz
WPF文字的处理是一个比较基础的技能.在使用WPF开发工具时,对于各种文字的处理时经常会遇到的情况.希望大家可以通过实践经验的积累,牢固掌握这一方面知识. AD:WOT2014:用户标签系统与用户 ...