Как отобразить заставку на iphone / android? - PullRequest
Новая
       33

Как отобразить заставку на iphone / android?

0 голосов
/ 01 марта 2012

У меня есть веб-сайт, который также предоставляет мобильное приложение (iphone / android).

Я бы хотел настроить заставку, когда пользователь подключается к сайту:

  • Установите файл cookie, чтобы показывать заставку один раз в неделю (например)
  • Мне бы хотелось, чтобы изображение занимало полноэкранный режим мобильного устройства при сохранении соотношения.

Любые идеи /инструменты / советы?

Должно ли это быть на стороне сервера или на стороне клиента?(Я использую jQuery / PHP / Zend Framework)

Спасибо.

Ответы [ 4 ]

1 голос
/ 01 марта 2012

Используйте 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=/'
1 голос
/ 01 марта 2012

Это просто вопрос правильной настройки 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 из тела.

Ура!

1 голос
/ 01 марта 2012

то, что я делал в прошлом, это использование подтверждения JavaScript, которое красиво стилизовано для iPhone

, например: 

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, но принцип тот же

0 голосов
/ 10 марта 2012

Это добавит заставку в ваше веб-приложение.Ниже приведены размеры, которые вам понадобятся как для iPad, так и для iPhone / iPod Touch, включая область строки состояния.

iPad Landscape - 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 - 320 x 480 (стандартное разрешение) 

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

Портрет iPhone / iPod Touch - 640 x 960 пикселей (Retina Display с высоким разрешением) 

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

При создании совместимости веб-приложения для iPad рекомендуется использовать как альбомный, так и книжный размеры.

...