Почему в моем шаблоне Django не работает обнаружение мобильных устройств? - PullRequest
0 голосов
/ 09 марта 2019

Я использую Django и Python 3.7. Я хотел бы отображать некоторые данные таблицы в мобильных браузерах немного по-другому, поэтому я отформатировал шаблон представления таблицы следующим образом:

{% if request.user_agent.is_mobile %}
    <td align="center"><a href="{{ articlestat.article.mobile_path }}" target="_blank">{{ articlestat.hits|floatformat:"0" }}</a></td>
{% else %}
    <td align="center"><h2><a href="{{ articlestat.article.path }}" target="_blank">{{ articlestat.hits|floatformat:"0" }}</a></h2></td>
{% endif %}

Однако после развертывания и перезапуска моего сервера, просмотр этого в мобильном браузере все еще показывает немобильную ветвь. Есть ли что-то еще, что мне нужно сделать, чтобы активировать мобильное обнаружение? Мой телефон - Android LG, который просматривается в браузере Chrome, если это имеет значение.

Редактировать: Я использую расширение "django-user-agents", найденное здесь - https://github.com/selwin/django-user_agents. По правде говоря, я открыт для любого решения, которое может точно определять мобильные браузеры, это как раз первое, что появилось в Google.

1 Ответ

0 голосов
/ 11 марта 2019

Вы пробовали Шаблонные фильтры ? Вы можете использовать их, выполнив следующие действия:

{% load user_agents %}

{% if request|is_mobile %}
    Mobile device stuff...
{% endif %}

В противном случае вам следует просто ввести {{ request|is_mobile }} в шаблон и посмотреть, что он выводит.

Другой вариант, который у вас есть, - использовать CSS для нацеливания на divs и скрывать / отображать их в зависимости от размера экрана. Это не точно, но это очень настраиваемый. Пример:

HTML

<td class="td-desktop" align="center"><h2><a href="{{ articlestat.article.path }}" target="_blank">{{ articlestat.hits|floatformat:"0" }}</a></h2></td>
<td class="td-mobile" align="center"><a href="{{ articlestat.article.mobile_path }}" target="_blank">{{ articlestat.hits|floatformat:"0" }}</a></td>

CSS

.td-mobile {
    display: none;
}
@media (max-width:768px)  {
    .td-desktop {
        display: none;
    }
    .td-mobile {
        display: block;
    }
}
...