`
goodsense
  • 浏览: 30655 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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标签大全

    我们前端人员经常写html, 但是老是忽略meta 所以这里关于webap里meta标签的使用定义,这种情况下使用的含义

    meta标签在移动平台开发中的应用详解

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

    移动端webApp之大前端

    移动端包括ipad、itocuch...不得不说的是viewport,这是移动端开发必备的一个meta标签属性。移动端设备分为屏幕设备大小以及浏览器视口大小,一般来说width表示浏览器视口大小,而device-width表示设备屏幕大小。比如ip

    手机/移动前端开发需要注意的20个要点

    1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 &lt;meta content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 name=...

    Mobile-Web-Tech:一些常用的移动开发有关信息和常见问题解决方案

    定期更新.meta标签,这些meta标签在开发webapp时起到非常重要的作用&lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /&gt;&lt;meta content="yes" ...

    Mobile-Web-Tech:移动端前端开发资料库

    meta标签,这些meta标签在开发webapp时起到非常重要的作用 &lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /&gt; &lt;meta content="yes" name=...

    web javaScript 获取终端ip 获取本地ip 获取本机ip地址,403报错解决方案

    能学到什么:手写ajax请求、兼容jsonp请求、动态添加meta标签、动态获取本地ip、处理403网络请求报错。 阅读建议:可以在以下框架中使用:react、react-native、vue、javaScript、web、jquery框架。在webapp工程,...

    solr-5.2.1-src.tgz源码

    创建JNDI让程序找到solr/home(当然你也可以用System Properties方式), 在WebRoot/META-INF目下创建context.xml 文件,并写入以下字符 &lt;Context&gt; &lt;/Context&gt; 注:value对应地址即你创建的solr/home目录地址...

    solr-5.2.1.part1.rar 编译第1部分,共2部分

    创建JNDI让程序找到solr/home(当然你也可以用System Properties方式), 在WebRoot/META-INF目下创建context.xml 文件,并写入以下字符 &lt;Context&gt; &lt;/Context&gt; 注:value对应地址即你创建的solr/home目录地址...

    apache-solr-ref-guide-5.2.1用户手册与搭建指南.rar

    创建JNDI让程序找到solr/home(当然你也可以用System Properties方式), 在WebRoot/META-INF目下创建context.xml 文件,并写入以下字符 &lt;Context&gt; &lt;/Context&gt; 注:value对应地址即你创建的solr/home目录地址...

    solr-5.2.1.part2.rar 编译 第2部分,共2部分

    创建JNDI让程序找到solr/home(当然你也可以用System Properties方式), 在WebRoot/META-INF目下创建context.xml 文件,并写入以下字符 &lt;Context&gt; &lt;/Context&gt; 注:value对应地址即你创建的solr/home目录地址...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    WebApp 基于浏览器来实现的一种应用 HybridApp 一种可以下载的Native App,其用户界面的全部或者部分元素在嵌入式浏览器组件(WebView之类的)里面运行 优雅降级 一开始就构建站点的完整功能,然后针对浏览器测试和...

Global site tag (gtag.js) - Google Analytics