Mar*_*mel 21 iphone splash-screen ios media-queries jquery-mobile
我在<head>我的网络应用程序中有以下代码,但我只是在我的iPhone 3GS上获得白屏,而DOM加载而不是启动画面.
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--STYLES-->
<!--SCRIPTS-->
<!-- iPhone LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h.png" sizes="320x480" media="(device-height: 480px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h2X.png" sizes="640x920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5+ LAUNCHSCREEN-->
<link href="includes/images/apple-launch-568h.png" sizes="640x1136" media="(device-height: 568px)" rel="apple-touch-startup-image">
如何让我的启动画面在所有版本的iPhone上正确显示？代码未显示,但我的网络应用程序图标在添加到主页时正在运行.我正在使用jQuery Mobile来构建这个Web应用程序.
我还确认PNG图像的大小正确,我删除了Web应用程序图标,刷新并重新添加到主屏幕多次.我在StackOverflow上找到的解决方案都没有为我工作.我没有尝试过JavaScript解决方案,因为我确信有一个纯CSS解决方案.
Tay*_*sak 49
该sizes属性适用于apple-touch-icons但它不适用于apple-touch-startup-images.定位启动映像的唯一方法是使用媒体查询.亚当的答案是好的,但<link>由于媒体查询不明确,因此依赖于特定顺序的s.以下是完全合格的媒体查询:
<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<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 (portrait) -->
<link href="apple-touch-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">
<!-- iPad (landscape) -->
<link href="apple-touch-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">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-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">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-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">
另请注意,某些视口会导致您的网络应用程序在iPhone 5上设置为信箱:
<!-- Letterboxed on iPhone 5 -->
<meta name="viewport"
content="width=device-width">
<meta name="viewport"
content="width=320">
<!-- Not letterboxed on iPhone 5 -->
<meta name="viewport"
content="initial-scale=1.0">
<meta name="viewport"
content="width=320.1">
我使用最小的iOS网络应用程序维护一个Gist,包括启动图像和图标.如果你想要更多的评论,我还写了一篇关于iPhone 5启动图片的博客文章.
| 归档时间： |
|
| 查看次数： |
21475 次 |
| 最近记录： |