发表于 & 归档在 HTML, Web.

网页应用程序要设计成与本地程序有相似的界面和操作方式,举个例子,它可以缩放填充整个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” 了解网页程序中视口的使用

 

指定网页图标

你可能希望用户添加你的网页到主屏,程序引导链接用一个图标表示,被称为 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 中,与本地程序相似,你可以为网页程序设置一个启动画面,在程序启动时呈现,这个功能对于离线程序尤其有用,默认网页程序最后一次的屏幕截图会当做起始界面,设置一个其他的启动图片可按下面的方式在网页中添加一行代码:

<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 元标签为 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, 按你的需要修改状态栏外观,举个例子,如果你要使用整个屏幕,可以设置状态栏样式为透明黑色.

下面的例子设置状态栏背景色为黑色:

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

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


6 − 四 =

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>