<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标签的更多相关文章

  1. html5 webApp常用Meta标签

    Html5 webApp常用Meta标签 <meta charset="UTF-8"> <meta name="viewport" conte ...

  2. WebApp 里Meta标签大全,webappmeta标签大全

    1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...

  3. 移动平台webApp的meta标签-----神奇的功效

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究 ...

  4. WebApp 里Meta标签大全

    1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...

  5. 移动平台的WebApp之Meta标签

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究 ...

  6. WebApp之Meta标签总结

    在做WebApp的时候,少不了Meta标签引用,这里总结了下. <meta name="apple-touch-fullscreen" content="yes&q ...

  7. 移动webApp必备技能一、WebApp 里Meta标签大全,webappmeta标签大全

    1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...

  8. WebApp之Meta标签 (关闭自动识别数字为电话号码或邮箱之类)

    iPhone上的Safari(还有些webkit android手机浏览器)会自动对看起来像是电话号码的数字串(包括已经加入连字符或括号格式化过的)添加电话链接,点击之后会询问用户是否想要拨打该号码. ...

  9. 移动端Web Meta标签

    原文  http://blog.segmentfault.com/jianjian_532633/1190000000654839 添加到推刊   在介绍移动端特有 meta 标签之前,先简单说一下 ...

随机推荐

  1. LIS的nlogn

    nlogn老忘,开个帖记录一下 开一个栈,每次取栈顶元素top和读到的元素temp做比较,如果temp > top 则将temp入栈:如果temp < top则二分查找栈中的比temp大的 ...

  2. jsp,图片显示

    问题:jsp中显示项目中image文件夹中的图片 1,项目中image文件夹中有对应的图片 2,<img ,src="/项目名/image/图片名.jpg">,用其他变 ...

  3. Mesa 3D

    Mesa 3D是一个在MIT许可证下开放源代码的三维计算机图形库,以开源形式实现了OpenGL的应用程序接口. OpenGL的高效实现一般依赖于显示设备厂商提供的硬件,而Mesa 3D是一个纯基于软件 ...

  4. MySQL模糊查询:LIKE模式和REGEXP模式

    MySQL模糊查询提供了两种模式:LIKE模式和REGEXP模式. LIKE模式 LIKE模式是使用的LIKE 或 NOT LIKE 比较运算符进行模糊查询. SELECT 字段 FROM 表 WHE ...

  5. 智能车学习(二十三)——浅谈心得体会

          因为毕竟是竞赛,跟学校挂钩,没办法开源代码和算法完成思路,所以不能详细写太多,如果可以等价交换的话,应该还是可以向领导申请一下的.       在厦大信科通信系,参加这个比赛,大家都觉得性 ...

  6. 【JSON 注解】JSON循环引用1-----Jackson常用注解介绍 eq:@JsonIgnore

    循环引用:实体A与实体B有关系,A中有B作为字段,B中有A作为一个字段.查询A对象后,将A对象转化为JSON格式数据时,会因为序列化过程中导致A中有B字段,B字段中又有A,这样就引起了循环引用的问题! ...

  7. JMeter中的关联-正则表达式提取(1)

    运用Jmeter正则提取器,可以从请求的响应结果中取到需要的内容,从而实现关联. jmeter之关联 的个人理解: 关联是请求与请求之间存在数据依赖关系,需要从上一个请求获取下一个请求需要回传回去的数 ...

  8. LoadRunner上传文件脚本

  9. hdu1159 最长公共子序列

    Common Subsequence Problem Description A subsequence of a given sequence is the given sequence with ...

  10. Android一体式(沉浸式)状态栏的实现

    注:公司开发任务适配是在4.4版本之上进行,所以此适配仅在4.4之上进行测试. 1.主要使用了第三方的开源项目SystemBarTint,github:https://github.com/jgilf ...