轻量高效的拓扑图组件
zh
  • Chinese

Safari Web Content Guide - 配置网页应用程序

2011-07-22 html web safari

配置网页应用程序

网页应用程序要设计成与本地程序有相似的界面和操作方式，举个例子，它可以缩放填充整个iPhone OS屏幕，这样你可以无缝的将你的网页程序放到主屏上，如同其他本地程序那样，这些为iPhone OS做的设置在其他平台下是不被理睬的。 举个例子，你可以设置一个特殊的图标，当它被添加到主屏时可以显示这个图标，这在 “Specifying a Webpage Icon for Web Clip.”中有详细描述。 当你的网页程序通过主屏启动时，你可以隐藏Safari界面，参阅 “Changing the Status Bar Appearance” 和 “Hiding Safari User Interface Components,” ，所有这些设置在其他平台下都是无效的。 参阅 “Viewport Settings for Web Applications” 了解网页程序中视口的使用  

指定网页图标

iPhone OS Note: 网页图标的功能从iPhone OS 1.1.3 开始提供， apple-touch-icon-precomposed.png 文件名从 iPhone OS 2.0起可用

你可能希望用户添加你的网页到主屏，程序引导链接用一个图标表示，被称为 Web Clips，按下面的步骤，你可以设置这个主屏上显示的图标

  • 为整个网站设置一个图标（包括网站上的每一个网页），在网站根目录放置一个PNG格式的图片，命名为 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png. 如果你命名为 apple-touch-icon-precomposed.png ，iPhone OS 版本 Safari 将不会对这个图标增加任何效果
  • 为单个网页设置图标，可以通过在网页中增加下面一行代码:
<link rel="apple-touch-icon" href="/custom_icon.png"/>

上面的示例中，用你的图标名称代替 custom_icon.png ，如果你不希望Safari 对你的图标增加特效处理，可以使用 apple-touch-icon-precomposed 替代  apple-touch-icon

参阅 iPhone Human Interface Guidelines for Web Applications  中 “Create an Icon for Your Web Application or Webpage” 了解网页图标尺寸

定制启动画面

iPhone OS Note: 启动画面定制从 iPhone OS 3.0 起可用.

iPhone OS 中，与本地程序相似，你可以为网页程序设置一个启动画面，在程序启动时呈现，这个功能对于离线程序尤其有用，默认网页程序最后一次的屏幕截图会当做起始界面，设置一个其他的启动图片可按下面的方式在网页中添加一行代码：

<link rel="apple-touch-startup-image" href="/startup.png">

上面的代码，用你自己的启动图片文件名代替 startup.png ，iPhone 和 iPod touch, 这个图片大小必须是 320 x 460 像素，且正立。

隐藏Safari用户界面组件

iPhone OS中，使用全屏模式是优化网页程序的一部分，这可以使之更接近与本地程序。当使用全屏模式时，Safari不再显示在网页内容中，没有URL地址栏，没有按钮栏，只有屏幕顶部的状态栏，参阅 “Changing the Status Bar Appearance” 了解状态栏的隐藏。 设置 [apple-mobile-web-app-capable](http://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/html/const/apple-mobile-web-app-capable) 元标签为 yes 启用全屏功能，如下：

<meta name="apple-mobile-web-app-capable" content="yes" />

你可以通过JavaScript调用 window.navigator.standalone 判断网页当前是否为全屏模式

修改状态栏外观

如果你的网页像本地程序那样全屏显示，你可以通过使用状态栏样式元标签，隐藏屏幕顶部的状态栏。 这个标签只有在全屏模式下才有用，参阅“Hiding Safari User Interface Components.” ，使用状态栏样式标签 [apple-mobile-web-app-status-bar-style](http://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/html/const/apple-mobile-web-app-status-bar-style), 按你的需要修改状态栏外观，举个例子，如果你要使用整个屏幕，可以设置状态栏样式为透明黑色. 下面的例子设置状态栏背景色为黑色：

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Next Prev