这已经在这里被多次询问,但没有一个可靠且可以理解的答案。这是一个网络应用程序,而不是本机应用程序。
我在用着:
<link rel="apple-touch-startup-image" href="images/startup.png" />
显示启动图像。如果图像的分辨率为 320x460,它可以正常加载。我尝试使用 640x920 的视网膜分辨率(状态栏取出 40 像素),但没有成功。我试过了@2x
,也失败了。
甚至有可能[还]?
这已经在这里被多次询问,但没有一个可靠且可以理解的答案。这是一个网络应用程序,而不是本机应用程序。
我在用着:
<link rel="apple-touch-startup-image" href="images/startup.png" />
显示启动图像。如果图像的分辨率为 320x460,它可以正常加载。我尝试使用 640x920 的视网膜分辨率(状态栏取出 40 像素),但没有成功。我试过了@2x
,也失败了。
甚至有可能[还]?
这将为您的 Web 应用程序添加一个启动画面。以下是 iPad 和 iPhone/iPod Touch 所需的尺寸,其中还包括状态栏区域。
<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- 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 和 iPod touch 上,图像必须是 320 x 460 像素并且是纵向的。
我已经测试过提供不同的尺寸,但如果尺寸不完全是 320x460,图像就会被忽略。苹果没有明确声明是否可以包含高分辨率启动图像,但论坛帖子(例如此处:Apple Dev Forum)表明目前不可能。
刚刚做了测试......苹果已经添加了“尺寸”属性。因此,对于高分辨率,您添加 size="640x920" 等。我想这也适用于不同的方向。
因此,如果我理解得很好,考虑到我们需要考虑3 个参数,我们实际上需要8个不同的图像:
我对吗?
这对我有用:
<link rel="apple-touch-startup-image" media="screen and (max-device-width: 320px)" href="images/iphone_splash.png"/>
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/iphone_splash_hires.png" />