移动web app 中的meta 标签

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
meta viewport 相关属性有下面几个

  • width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )
  • height: viewport 的高度 (范围从 223 到 10,000 )
  • initial-scale: 初始的缩放比例 (范围从>0到 10 )
  • minimum-scale: 允许用户缩放到的最小比例
  • maximum-scale: 允许用户缩放到的最大比例
  • user-scalable: 用户是否可以手动缩放

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

IOS

<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”将会占据页面一定位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

<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)

移动web app 中的meta 标签

时间: 2024-10-17 04:59:29

移动web app 中的meta 标签的相关文章

[Office365] 如何在Office365的Outlook Web App 中索取&ldquo;送达&rdquo;及&ldquo;读信&rdquo;回条

[Office365] 如何在Office365的Outlook Web App 中索取"送达"及"读信"回条 问题的来龙去脉 如何透过设定把 Office365 的 Outlook Web App 中在寄送信件时,索取"送达回条"及"读信回条",在本文中即可知悉其操作方式! ※ 此文非针对"读取回条"的处置方式( 即非别人寄信给你向您索取回条),而是向别人要求取得读取回条哟!! 问题的发生原因 1. 欲取

手机页面中的meta标签

以前看书的时候,觉得meta标签就只有一个charset对于我来说是有用的.前段时间有个学弟让我写个手机版的网页,我才知道原来meta标签有那么多学问. meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制

手机H5移动端WEB资源整合之meta标签

一.相关网站使用meta的实例 youku首页的Meta设置: <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" /> <meta n

HTML中的meta标签常用属性及其作用总结

文章同步到github 以前没怎么太注意过meta标签的作用,只是简单了解一些常用属性,现在结合个人了解的进行记录与总结: 元数据 首先需要了解一下元数据(metadata)元素的概念,用来构建HTML文档的基本结构,以及就如何处理文档向浏览器提供信息和指示,它们本身不是文档内容,但提供了关于后面文档内容的信息.--出自<html5权威指南> 如title.base.meta都是元数据元素.本文主要介绍<meta>. <meta>元素 <meta> 元素可提

移动端web开发,基本Meta标签

1.<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> 作用:设置默认尺寸,对缩放进行限制. 2.<meta name="apple-touch-fullscreen" content="yes"> 作用:添加到

Tomcat之web.xml中的&lt;url-pattern&gt;标签

关于web.xml配置中的<url-pattern> 标签<url-pattern> <url-pattern>是我们用Servlet做Web项目时需要经常配置的标签,例: <servlet> <servlet-name>index</servlet-name> <servlet-class>com.we.servlet.IndexServlet</servlet-class> </servlet>

5.2 Outlook Web App 中的应用程序

我们增加了若干个 Outlook 应用程序:Bing 地图.建议约会和操作项.这些应用程序与 Outlook 和 Outlook Web App 集成,同时延伸了邮件和日历项目的信息和功能. Outlook 中的应用程序尝试通过使用电子邮件的内容,预测您的需求并自动建议您可能要执行的操作.例如,如果电子邮件包含街道地址,则 Bing 地图应用程序会向您提供一个 Bing 选项卡,其中包含指向地图和方向的快速链接.或者,如果电子邮件中的短语建议可能的操作项,则操作项应用程序会创建建议的任务供您检查

web.xml中Filter过滤器标签说明

原文:http://www.cnblogs.com/edwardlauxh/archive/2010/03/11/1918618.html 在研究liferay框架中看到Web.xml中加入了过滤器的标签,可以根据页面提交的URL地址进行过滤,发现有几个新标签没用过,下面就介绍以下几个过滤器的标签用法: <!-- 定义Filter --> <filter> <!-- Filter的名字 --> <filter-name>log</filter-name

HTML 关于head中的&lt;meta&gt;标签

关于<meta> 标签 <meta>标签出现在网页的标题部分,这些信息并不会出现在浏览器页面的显示之中,只会显示在源代码中.也就是在...当中. 主要用途是设置网页语言的编码方式. 一般这样来进行设置: <head> <meta http-equiv="Content-Type" content="text/html" charset=gb2312> </head> http-equiv传送HTTP通信协议