在iPhone Web应用程序中,您可以定义一个自定义的初始屏幕,该屏幕将在加载网站时显示(从主页上的已保存书签图标加载网站时).关键是要使Web应用程序启动体验更像真正的iphone应用程序.
我相信语法是这样的:
<link rel="apple-touch-startup-image" href="/splash.png" />(放在<head>页面的部分).
其中splash.png是垂直方向的320x460图像.
我似乎无法让它工作......有没有人有任何提示和技巧？
您只能设置一个启动画面,否则它将失败.要选择ipad或iphone启动画面,您需要一点点javascript.
可用于本机应用程序的ipad横向启动画面不适用于Web应用程序.iphone4的视网膜闪屏也不会.您只能选择ipad或iphone尺寸的闪光灯.在link元素上设置size属性似乎适用于ipad.但是有多个启动图像链接元素会导致iphone失败.
启动画面大小必须准确.iphone/ipod为320x460,ipad为1024x748.如果您需要横向斜线屏幕,则需要在Photoshop中旋转它,因为在应用重启期间无法控制.
要测试它最好首先尝试关闭app缓存并使用charles代理或类似的东西来限制带宽.
<!-- status bar -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- hide safari chrome -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- iphone start up screens -->
<script type="application/javascript">
var appl = document.createElement("link");
appl.setAttribute('rel', 'apple-touch-startup-image');
if(screen.width < 321 && window.devicePixelRatio == 1) {
appl.setAttribute('href', 'img/icons/launch320x460.png'); //iphone 3Gs or below
} else if (screen.width < 321 && window.devicePixelRatio == 2) {
//setting @2x or a 640x920 image fails, just use the iphone splash screen
} else if (screen.width < 769 && Math.abs(window.orientation) != 90) {
appl.setAttribute('href', 'img/icons/launch1024x748.png'); //ipad 2 or below (portait)
} else if (screen.width < 769 && Math.abs(window.orientation) == 90) {
//landscape fails as well, use standard ipad screen
}
document.getElementsByTagName("head")[0].appendChild(appl);
</script>
<!-- iphone springboard icons -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/icons/icon57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/icon72x72.png" />
Apple 没有太多关于此主题的文档（请参阅此 URL）。
有几点需要注意：
您还可以使用以下代码显式设置 Web 应用程序图标：
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
| 归档时间： |
|
| 查看次数： |
14106 次 |
| 最近记录： |