Как разделить столбец на веб-странице в зависимости от того, является ли браузер мобильным?

Question

У меня есть сайт, который в основном предназначен для просмотра на устройствах Android и iPhone.Однако, конечно, возможно, что люди могут просматривать его в Интернете с настольного компьютера или ноутбука.

Сайт в настоящее время имеет тонкую ширину, 320 пикселей в ширину, для размещения большинства портативных устройств.И вообще, мне нравится макет, поэтому я не против, чтобы люди на рабочих столах видели тот же интерфейс, что и наладонники.Мне нравится согласованность интерфейса между устройствами.

В идеале мне хотелось бы иметь дополнительный информационный дисплей для людей, просматривающих сайт на больших мониторах.Вот так:

Ключевой момент, на котором я застрял, - это как предотвратить загрузку или предложение интерфейса B мобильным устройствам.Я знаю, как создать дополнительный DIV и скрыть его с помощью CSS на основе идентификации браузера.Однако по ряду причин важно, чтобы интерфейс B не просто был скрыт от некоторых устройств, но данные даже не передавались.

Возможно ли это?

Идеальное решение должновключают в себя следующие соображения:

• По умолчанию предполагается, что устройство является мобильным и предлагает только интерфейс A. Только если «перехват браузера» возвращается с высокой степенью достоверности (ну, как определеннонасколько это возможно), что устройство представляет собой определенный белый список известных браузеров для настольных компьютеров, затем покажите интерфейс B.

• Решение, которое работает на стороне сервера.Опять же, никакие данные из интерфейса B не должны передаваться, если предполагается, что посетитель находится на мобильном телефоне.

• Интерфейс A и B можно разделить кадрами, DIV, iFrames ... IЯ агностик по этому поводу, но я больше знаком с CSS, поэтому мне было бы проще понять их в двух разных DIV.

Answer 1

Я бы вообще не использовал анализ кода браузера, но CSS 3 Media Queries, чтобы выяснить, подходит ли «Интерфейс B» и загружает его содержимое с помощью AJAX, только если он отображается.

Примерно так:

<style type="text/css">
  @media only screen and (max-width: 320px) { 
     #interface-b {
       display: none;
     }
  }
</style>

<script type="text/javascript">
   // Using jQuery for convience here
   // Let #interface-b be empty originally, 
   // and load it's content with AJAX only if needed.
   jQuery(function() {
      if (jQuery("#interface-b").is(":visible")) {
        jQuery("#interface-b").load(...);
      }
   });
</script>

(РЕДАКТИРОВАТЬ: Добавлено ключевое слово only для лучшей обратной совместимости)

Answer 2

1) Проверьте http://us.php.net/get_browser -> используйте поле 'ismobiledevice' в get_browser '. Вам может потребоваться актуальный php_browscap.ini, но вы можете получить его здесь Просто сделайтепростое выражение if для затем, чтобы оценить, хотите ли вы «напечатать div».(Скажите, если вы не совсем понимаете, что я имею в виду)

2) У вас есть запасной JS, скрывающий второй div (в любом случае должен быть пустым)