【问题标题】:iPhone web app startup screeniPhone 网络应用程序启动屏幕
【发布时间】:2010-10-16 09:22:54
【问题描述】:

我正在开发一个 iPhone 网络应用程序,我正在使用“apple-mobile-web-app-capable”元标记来获得“全屏模式”。当我启动该应用程序时,它会显示我上次加载时离开的页面的图片。看起来应用程序已准备好接收输入,但实际上并没有,这令人困惑。

是否可以更改默认行为并在准备好接收输入之前显示空白屏幕?

【问题讨论】:

    标签: iphone web-applications fullscreen iphone-standalone-web-app


    【解决方案1】:

    这将为您的 Web 应用程序添加一个启动画面。以下是 iPad(视网膜和非视网膜)、iPhone/iPod Touch(视网膜和非视网膜)和 iPhone 5 所需的尺寸。其中还包括状态栏区域。

    Apple Docs-Launch Images, Apple Docs-Icon and Image Sizes

    <!-- iPhone (Retina) -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    
    <!-- iPhone 5 -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg"  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    
    <!-- iPad Portrait -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    
    <!-- iPad Landscape -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    
    <!-- iPad Portrait (Retina) -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    
    <!-- iPad Landscape (Retina) -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    

    如果创建与 iPad 兼容的 Web 应用程序,建议同时使用横向和纵向尺寸。

    【讨论】:

    • 谢谢。但是每张图片的分辨率是多少?
    • 对于iPhone来说,为什么在状态栏带走20px的情况下需要480px的启动图片高度?启动图像不会偏离中心吗?
    • 这个答案没有用。至少对于 iPhone 4,我们必须将图像设置为 320x460。
    • 这确实有效。如果您使用的是 460 高度的图像,则说明您没有遵循 Apple 的标准。您没有正确阅读答案。图像尺寸在我上面的评论中引用的 Apple 文档中进行了概述。此答案显示所需的媒体查询 - 而不是图像大小。
    【解决方案2】:

    它必须是 320x460,如果它是 320x480,它将不起作用。

    【讨论】:

      【解决方案3】:

      把它放在你的 HEAD 标签之间:

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

      您使用的图片必须是 JPG 或 PNG,分辨率为 320x460

      【讨论】:

      【解决方案4】:

      图像必须是 PNG 和 320x460 这仅适用于 iPhone OS 3.0 或更高版本。

      【讨论】:

      • 安卓有没有办法做到这一点?
      猜你喜欢
      • 1970-01-01
      • 2011-09-24
      • 1970-01-01
      • 2016-10-11
      • 1970-01-01
      • 2018-06-20
      • 1970-01-01
      • 1970-01-01
      • 2011-08-25
      相关资源
      最近更新 更多