Question

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

我想在用户连接到网站时设置启动画面：

设置Cookie以每周显示一次启动画面（例如）
我希望图片在保持比率的同时获取移动设备的全屏。

任何想法/工具/建议？

它应该是服务器端还是客户端？（我使用jQuery / PHP / Zend Framework）

感谢。

Answer 1

我过去所做的是使用在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添加一些案例，但原理是相同的

Answer 2

使用jQuery Mobile创建启动画面。您有获取屏幕宽度的特定方法：

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

此启动画面应该是指向您的移动应用的链接。关于cookie，每个cookie都有一个到期日，之后它会被删除。如果未指定到期日期，则在关闭浏览器时cookie将被删除。该到期日应为UTC（格林威治标准时间）。

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

Answer 3

这只是正确设置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，看看你是如何在支持它的移动空间中工作的。这是一个参考link。

获取项目：

localStorage.getItem( 'name_of_item' );

设置项目：

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

关闭启动画面后，如果您有更多需要滚动的内容，请务必从正文中删除overflow:hidden。

干杯！

Answer 4

这将为您的Web App添加启动画面。以下是iPad和iPhone / iPod Touch所需的尺寸，包括状态栏区域。

iPad横向 - 1024 x 748

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

iPad Portrait - 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应用程序，建议使用横向和纵向尺寸。

如何在iphone / android上显示启动画面？

4 个答案: