Изменить отображение css, когда userAgent, если пользователь находится на iPhone & window.navigator.standalone == true - PullRequest
Новая
       13

Изменить отображение css, когда userAgent, если пользователь находится на iPhone & window.navigator.standalone == true

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

Я бы хотел создать webAPP и отображать другой контент, когда

  1. пользователь открывает webAPP через браузер сафари или
  2. когда они открывают webAPP через веб-клип с домашнего экрана

Обнаружение работает - я проверяю его с помощью document.write - но свойство отображения CSS не меняется. Что я делаю не так?

Спасибо заранее! 

<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<script type="text/javascript">
if (window.navigator.userAgent.indexOf('iPhone') != -1) {
    if (window.navigator.standalone == true) {
        // document.write('<p>homescreen<\/p>');
        document.getElementById("homescreen").style.display = 'block';
    }else{
        // document.write('<p>safari<\/p>');
        document.getElementById("safari").style.display = 'block';
    }
}else{
        // document.write('<p>no iOS<\/p>');
        document.getElementById("ios").style.display = 'block';
}
</script>
</head>
<body>

<div id="homescreen" style="display:none;">
you opened it from the homescreen
</div>

<div id="safari" style="display:none;">
you opened it from safari
</div>


<div id="ios" style="display:none;">
you have no iOS
</div>



</body>
</html>

1 Ответ

3 голосов
/ 30 марта 2012

<script> оценивается до загрузки DOM, поэтому document.getElementById("xx") возвращает undefined.Проверьте консоль ошибок JavaScript, возможно, есть ошибка типа: «Uncaught TypeError: Невозможно прочитать свойство 'style' of null".

  1. Либо переместите блок <script> в конец своего тела

  2. Еще лучше, используйте jQuery и что-то вроде этого, см. http://api.jquery.com/ready/

    $(function() {
  if (window.navigator.userAgent.indexOf('iPhone') != -1) {
    if (window.navigator.standalone) {
      $('#homescreen').show();          
    }else{
      $('#safari').show();
    }
  }else{
    $("#ios").show();
  }
});

Или что может быть еще лучшей и более гибкой альтернативой, это добавлять классык элементу <body>, затем вы можете легко показать / скрыть что-либо, используя CSS. 

$(function() {
   if (window.navigator.standalone) {
     $('body').addClass('standalone');
   }
});

Тогда в CSS все разделы могут быть легко показаны / скрыты на основе этих идентификаторов. 

.someContent { display: none; }
body.standalone .someContent { display: block; }

Для селектора мобильных устройств (iPhone) вы могли бы даже избежать переключения пользовательского агента JS (FYI, ваш indexOf не будет соответствовать iPad или iPod Touch) и лучше полагаться на медиа-запросы CSS, такие как @media only screen and (max-device-width: 480px) (этотдля iPhone пейзаж и портрет).

...