在做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" />

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必备技能一、WebApp 里Meta标签大全，webappmeta标签大全

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

  7. WebApp之Meta标签

    <meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后,全屏显示 < ...

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

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

  9. 移动端Web Meta标签

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

随机推荐

  1. 快速玩转linux(2)

    ssh是什么   SSH:secure shell 安全外壳协议 建立在应用层基础上的安全协议 可靠, 专为远程登录会话和其他网络服务提供安全性的协议. mark 客户端服务端都基本支持全平台 服务器 ...

  2. 模块importlib介绍

    importlib包的目的是双重的.一个是在Python源代码中提供import语句(以及扩展名为__import__()函数)的实现.这提供了可以移植到任何Python解释器的import的实现.这 ...

  3. 浅谈Linux下mv和cp命令的区别

    1.功能上的区别 mv:用户可以使用该命令为文件或目录重命名或将文件由一个目录移入另一个目录中. cp: 该命令的功能是将给出的文件或目录拷贝到另一文件或目录中. 2.从inode角度来区分 mv:会 ...

  4. jquery图片滚动jquery.scrlooAnimation.js

    ;(function ($, window, document, undefined) { var pluginName = "scrollAnimations", /** * T ...

  5. jquery图片滚动demo.css

    body, html { font-size: 100%; padding: 0; margin: 0;} /* Reset */*,*:after,*:before { -webkit-box-si ...

  6. sftp上传到远程服务器

    开发遇到一个需求,需要将图片通过sftp上传到远程服务器上,之前没用过这个功能,折腾了我好几天才搞定,下面记录下我的处理方法: $sftp = 'ssh2.sftp://';//连接sftp $con ...

  7. CentOS下安装pip

    CentOS下安装pip 通常情况下使用命令: yum -y install pip 也有可能报错,无法安装.这是应该使用第二种方法. 1.首先需要先安装扩展源EPEL: yum -y install ...

  8. VS2017发布微服务到docker

    1.本文档以eShopOnContainers.sevices.identity为描述对象,并包含docker for windows的部分配置流程. 2.前置环境:win10操作系统.安装VS201 ...

  9. samba与apache配置使用

    samba与apache根目录 1.直接将apache用户作为samba用户 2.给apache用户赋宇网站根目录的acl rwx权限 #注意 第一次不要加默认的权限 setfacl -m u:apa ...

  10. 搭建cvs服务器

    http://zhangjunhd.blog.51cto.com/113473/78595 http://www.cnblogs.com/lee/archive/2008/10/22/1317226. ...