如何在iphone/android上显示splashscreen

How to display a splashscreen on iphone/android?

本文关键字：显示 splashscreen android iphone      更新时间：2023-09-26

我有一个网站，它也提供移动应用程序（iphone/android）。

每当用户连接到网站时，我想设置一个引人注目的屏幕：

  • 设置cookie以每周显示一次引人注目的屏幕（例如）
  • 我希望这张照片能在保持比例的同时拍摄手机的全屏

有什么想法/工具/建议吗？

应该是服务器端还是客户端？（我使用的是jQuery/PHP/ZendFramework）

谢谢。

我过去所做的是在iPhone 上使用风格优美的JavaScript确认

例如：

if(cookie is not set and browser is iOS) 
{
    var where_to=confirm("We have launched an iPhone/iPod Touch App. Would you like to download it?");
    document.cookie = 'seen_iphone_prompt=1; expires= {{date here}}; path=/'
    if(where_to==true)
    {
        window.location="http://app_store.com?link=here;
    }
}

这种方法很好，因为它迫使用户采取行动，作为自定义的飞溅，人们可以直接靠近。可能需要在这里为android添加一些案例，但原理是相同的

使用jQuery Mobile创建splashscreen。你有特定的方法来获得屏幕宽度：

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

这个splashscreen应该是指向你的移动应用程序的链接。关于饼干，每个饼干都有一个到期日，到期后就会被丢弃。如果你没有指定有效期，当你关闭浏览器时，cookie就会被丢弃。此到期日期应为UTC（格林威治）时间。

document.cookie ='ppkcookie1=testcookie; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'

这只是设置正确css的问题。

在body标记之后给自己一个元素，不要再嵌套。

<body>
    <div id="splash"></div>
</body>

将其css设置为：

#splash {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: red;
    z-index: 99999;
}

如果你的身体包裹在页面之外（意味着它需要滚动），将身体设置为：可能会有所帮助

body {
    overflow: hidden;
}

太棒了，你有一个启动页面！只需在#splash中添加您的内容。

现在，你必须每周展示它。。。好吧，我个人会选择使用localStorage而不是cookie，看看你在支持它的移动空间中是如何工作的。这是一个参考链接。

获取物品：

localStorage.getItem( 'name_of_item' );

设置项目：

localStorage.setItem( 'name_of_item', 'some value that has to be a string' );

关闭启动屏幕后，如果有更多内容需要滚动，请确保从正文中删除overflow:hidden。

干杯！

这将为您的Web应用程序添加一个启动屏幕。以下是iPad和iPhone/iPod Touch所需的尺寸，其中还包括状态栏区域。

iPad横向–1024 x 748

<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />

iPad纵向–768 x 1004

<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

iPhone/iPod Touch Portrait–320 x 480（标准分辨率）

<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />

iPhone/iPod Touch Portrait–640 x 960像素（Retina Display高分辨率）

<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />

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

相关文章：