适用于iOSnetworking应用(尤其是iPad)的多个“apple-touch-startup-image”分辨率?
我已经写了一个基于HTML5的iOS Web应用程序,似乎都运行良好,但我试图用多个启动屏幕擦亮它。 iPhone / iPod touch的效果很好,具有320×460的PNG,如下所示:
<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
我发现大量的文档说iPad的启动图像应该像iPhone / iPod touch一样,从高度上剃去20px,以适应768×1004(纵向)或1024×748(横向)分辨率的状态栏。 但是,在我的testing中(目前有一个运行iOS 3.2.2的iPad),只有768×1004(肖像)分辨率有效(但不正确,在横向模式下20px太窄)。
我试过以下(基于apple-touch-icon
链接function的狂野猜测),无济于事:
<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" /> <link rel="apple-touch-startup-image" sizes="1024x748" href="img/startup_screen-1024x748.png" /> <link rel="apple-touch-startup-image" sizes="768x1004" href="img/startup_screen-768x1004.png" />
如果是最后一个link
元素,则只有768×1004的分辨率图像才能正常工作。 如果1024×748分辨率的图像是最后一个,则代替使用灰色背景(但不包括768×1004)。 所以,显然apple-touch-startup-image
link
不支持sizes
属性。
这在新版本的iOS中支持吗? 有没有办法支持多个启动图像? 我应该创build一个1024×768的启动镜像吗? 如果是这样的话,iPhone / iPod touch将会缩小吗? 或者,我应该放弃,而不是iPad的初创形象?
iPad和iPhone的启动图像和触摸图标 (landscape || portrait)和(retina || not)的确切解决scheme:
<!-- iPhone ICON --> <link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon"> <!-- iPad ICON--> <link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon"> <!-- iPhone (Retina) ICON--> <link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon"> <!-- iPad (Retina) ICON--> <link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon"> <!-- iPhone SPLASHSCREEN--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) SPLASHSCREEN--> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (portrait) SPLASHSCREEN--> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <!-- iPad (landscape) SPLASHSCREEN--> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iPad (Retina, portrait) SPLASHSCREEN--> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (Retina, landscape) SPLASHSCREEN--> <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
我实际上已经将其应用于横向模式。 我在这里获得了信息: https : //gist.github.com/472519 。
问题是风景图像必须是748×1024(横向的风景图像,我顺时针旋转)而不是1024×748。
我也不得不以肖像模式启动应用程序,然后景观。
我只是想提供实际工作的答案的组合。 我们发现在select的答案,飞溅图像的视网膜版本没有被使用。 帕维尔的答案确定了iPad的视网膜版本。 以下已经在iPhone(视网膜和非视网膜)和iPad(视网膜和非视网膜)上进行过testing。
<!-- For third-generation iPad with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> <!-- For iPhone with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <!-- For first- and second-generation iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> <!-- iPhone SPLASHSCREEN--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) SPLASHSCREEN--> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 460px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPhone 5 (Retina) SPLASHSCREEN--> <link href="apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (non-Retina) (Portrait) --> <link href="apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image" /> <!-- iPad (non-Retina) (Landscape) --> <link href="apple-touch-startup-image-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup-image" /> <!-- iPad (Retina) (Portrait) --> <link href="apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPad (Retina) (Landscape) --> <link href="apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
我不能赞扬任何这一点,但这种configuration的作品。 只需复制和粘贴,确保图像的大小完全符合他们的名字。
如果一个链接元素缺less一个媒体资源,事情并不适合我。 该代码成功地在iPhone 3G和iPad(纵向和横向模式)上显示启动图像。
<-- iPad - landscape (748x1024) --> <link rel="apple-touch-startup-image" href="images/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" /> <-- iPad - portrait (768x1004) --> <link rel="apple-touch-startup-image" href="images/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" /> <-- iPhone - (320x460) --> <link rel="apple-touch-startup-image" href="images/iphone-lowres.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" />
无法尝试iPhone4(高分辨率),但最有可能的是,它的工作原理是相同的。
最完整的要点解决scheme: https : //gist.github.com/tfausak/2222823
启动屏幕显然只在以下条件下工作
1)必须是设备所需的确切大小。 2)应用程序启动时,设备必须处于纵向位置。 3)一些消息来源说只有PNG,但JPG现在似乎工作。
我能够在iPhone / iPad / iPhoneRetina上获得4个独立的WebApp启动图像的方式是几件事的组合…
非Retina iPhone(320×460):
<link rel="apple-touch-startup-image" href="startup-iphone.jpg" />
视网膜iPhone(4&4S)(640×920):使用上述的Javascript技术。 http://www.paulofierro.com/archives/568/
iPad(两种方向)都很棘手。 风景必须是748w x 1024h,“底部”是左手边。 肖像必须是768w x 1004h,“底部”是底部。 我必须通过在用户代理中检测iPad来通过PHP包括iPad标签,否则非视网膜iPhone启动图像将不会加载。 这里是代码…
<?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); ?> <?php if ($isiPad) { ?> <link rel="apple-touch-startup-image" href="startup-landscape.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" /> <link rel="apple-touch-startup-image" href="startup-portrait.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" /> <?php } ?>
通过这样做,我的web应用程序(实际上是一个简单的WordPress博客网站,目前正在脱机工作)为iPhone,Retina和iPad定位提供启动映像。 在运行最新的iOS 4,iPad和iPhone 4的iPhone 3G上testing,都运行最新的iOS 5。
当然,你也可以通过javascript包含iPad代码。 大声笑
我已经testing过很多次了,现在我确定它的工作原理是这样的:首先以纵向方式保持你的垫,打开你的应用程序,然后用横向方式持有你的应用程序,打开你的应用程序。 吮吸,但…似乎这是做到这一点的唯一方法。 你必须首先保持你的垫子肖像“解锁”的错误。
花了一些时间搞清楚如何为新的iPad(视网膜)启动屏幕,这里是我的testing和工作的解决scheme为新的iPad(视网膜)的方向。
PS发布之前,我已经testing已经给出的解决scheme,他们没有工作。
<!-- iPad (Retina) (Portrait) --> <link href="/img/ios/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPad (Retina) (Landscape) --> <link href="/img/ios/apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
这可能是显而易见的一些,但启动图像不会为我工作,除非我添加我添加到主屏幕的快捷方式,从那里运行,并具有以下代码:
<meta name="apple-mobile-web-app-capable" content="yes" />
这个页面对于搞清楚这一点非常有用: http : //lineandpixel.com/blog/ios-web-app-icons-and-startup-images
完整的meta:
<!-- Icons --> <!-- iOS 7 iPad (retina) --> <link href="icon-152x152.png" sizes="152x152" rel="apple-touch-icon"> <!-- iOS 6 iPad (retina) --> <link href="icon-144x144.png" sizes="144x144" rel="apple-touch-icon"> <!-- iOS 7 iPhone (retina) --> <link href="icon-120x120.png" sizes="120x120" rel="apple-touch-icon"> <!-- iOS 6 iPhone (retina) --> <link href="icon-114x114.png" sizes="114x114" rel="apple-touch-icon"> <!-- iOS 7 iPad --> <link href="icon-76x76.png" sizes="76x76" rel="apple-touch-icon"> <!-- iOS 6 iPad --> <link href="icon-72x72.png" sizes="72x72" rel="apple-touch-icon"> <!-- iOS 6 iPhone --> <link href="icon-57x57.png" sizes="57x57" rel="apple-touch-icon"> <!-- Startup images --> <!-- iOS 6 & 7 iPad (retina, portrait) --> <link href="startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 & 7 iPad (retina, landscape) --> <link href="startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 iPad (portrait) --> <link href="startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> <!-- iOS 6 iPad (landscape) --> <link href="startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> <!-- iOS 6 & 7 iPhone 5 --> <link href="startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 & 7 iPhone (retina) --> <link href="startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 iPhone --> <link href="startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
iPhone 6和iPhone 6+
<link href =“launch6.png”media =“(device-width:375px)”rel =“apple-touch-startup-image”> <link href =“launch6plus.png”media =“(device-width:414px)”rel =“apple-touch-startup-image”>
从这个链接: http : //www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers
如果你想瞄准视网膜显示,我find了一个解决scheme,并在这里博客: http : //paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-视网膜显示器,还-欢迎
基本上尺寸属性和媒体查询将无法正常工作。 加载页面后,您必须通过JavaScript注入高分辨率启动图像。 克里,但工作。
- UIView autoresizingMask – 接口生成器到代码 – 编程创buildstruts和弹簧 – Swift或Objective-C
- Main.storyboard文件需要Xcode 8.0或更高版本
- 我如何pipe理构buildiPhone应用程序的精简版和付费版本?
- 只有在asynchronous函数完成执行后才能运行代码
- iOS – xcode模拟器上的颜色与设备上的颜色不同
- iOS8今天扩展使用只有自动布局的高度给破坏的约束
- NSLocalizedString与swiftvariables
- 无意中从XCode项目中删除了xcassets文件
- 如何检查CLLocationCoordinate2D是否为空?