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 标签之前,先简单说一下 ...
随机推荐
- WPF QuickStart系列
接触WPF有一段时间了,现在做的项目也是WPF相关的.所以决定写一个WPF QuickStart系列的文章.也是自己对WPF学习的总结,如果对你有帮助,就非常棒了.因为不善言辞,所以尽量以WPF示例和 ...
- hdu 4036 2011成都赛区网络赛F 模拟 **
为了确保能到达终点,我们需要满足下面两个条件 1.能够到达所有山顶 2.能够在遇到苦土豆时速度大于他 二者的速度可以用能量守恒定律做,苦土豆的坐标可通过三角形相似性来做 #include<cst ...
- view的setTag() 和 getTag()应用 (转)
原文地址:http://www.cnblogs.com/qingblog/archive/2012/07/03/2575140.html View中的setTag(Onbect)表示给View添加一个 ...
- Android中log使用方法
private static final String ACTIVITY_TAG="MainActivity"; Log.v(MainActivity.ACTIVITY_TAG, ...
- java + jni + mingw实例开发(基于命令行窗口模式)
java+ jni + mingw 参考网址: http://wenku.baidu.com/link?url=9aQ88d2ieO7IgKLlNhJi5d3mb3xwzbezLPzSIX3ixz4_ ...
- jQuery插件开发--(转)
1,开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...
- hdu3535 背包大杂汇
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3535 //不想写题解,这道题让我对背包的理解更深了,我相信我不会忘记的.... 代码: # ...
- 安卓微POS-PDA手持终端,支持离线在线联网销售开单;移动开单 盘点 功能
采购单.采购退货单 销售单.销售退货单.收款.优惠.赠品等操作实现盘点作业(多台设备同时作业,相同商品,数量累计) 现场打印票据 实现采购订单.采购单.采购退货单.销售订单.销售单.销售退货单验货没 ...
- HTML DOM domain 属性
定义和用法 domain 属性可返回下载当前文档的服务器域名. 语法 document.domain 说明 该属性是一个只读的字符串,包含了载入当前文档的 web 服务器的主机名. 提示和注释 提示: ...
- MongoDB 入门之安装篇
前言:MongoDB 在各 OS 上的安装比较简单,此文章只用来记录,不考虑技术深度. 一.Ubuntu 导入 MongoDB 公钥,添该软件源文件,更新源列表 sudo apt-key adv -- ...