Есть ли разница в веб-сайте django, развернутом на гибком beanstalk между мобильным устройством или настольным компьютером? - PullRequest
0 голосов
/ 25 января 2019

Я развернул свое веб-приложение (на данный момент это всего лишь несколько шаблонов с js и css) на aws эластичный beanstalk, и веб-сайт запущен и работает.

Я использовал предопределенную тему для макетавеб-сайт с адаптивным дизайном.

На компьютере dekstop веб-сайт выглядит хорошо, даже если я вручную изменил размер окна.В каждом разрешении это выглядит великолепно!Каждый значок и изображение загружаются идеально.

Теперь, если я хочу посмотреть веб-сайт на своем смартфоне (мобильном устройстве), он начинает "набирать обороты".Он добавляет белую полосу под стартовой страницей и в разных браузерах просто смешивает некоторые элементы div, отображая их вверху страницы, а не внизу.Некоторые значки также отображаются неправильно.

Я пробовал разные браузеры для настольного ПК, все хорошо.На смартфоне у меня проблемы во всех браузерах.

Я проверил веб-сайт (www.meyn-computer-lotse.de) на http://www.mobilephoneemulator.com/ и там веб-сайт также отображается отлично.

Я просто не могу найти свою ошибку ...

Теперь у меня есть два вопроса: 1. Есть ли на мобильном устройстве простой способ поиска правил CSS для веб-сайта, потому что на рабочем столеЯ могу легко найти применяемые правила.2. Нужно ли указывать что-то в django или aws эластичный бобовый стебель для мобильного устройства?

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 26 января 2019

Вместо того, чтобы искать правила CSS, применяемые при использовании телефона, вы можете нажать F12 в вашем браузере. Если вы используете браузер Chrome, вы можете переключать панель инструментов устройства и выбирать между различными устройствами, на которых вы хотите просматривать свой веб-сайт.

enter image description here

Чтобы ответить на ваш второй вопрос, чтобы убедиться, что страницы отзывчивы, вы можете использовать что-то вроде Bootstrap "https://getbootstrap.com". Bootstrap заботится о Javascript и CSS, чтобы убедиться, что все отображается правильно, хотя иногда вы можете иметь выбрать другой макет, потому что у начальной загрузки есть некоторые ограничения.

Вы можете провести различие между пользователями настольных компьютеров или мобильных телефонов, чтобы обслуживать их по другому шаблону, оптимизированному для используемого ими устройства. Здесь у вас есть несколько вариантов:

  • Использование django-mobile ,

    django-mobile предоставляет простой способ обнаружения мобильных браузеров и дает инструменты под рукой, чтобы сделать несколько различных шаблонов доставить мобильную версию вашего сайта пользователю.

  • Использование MobileESP ,

    MobileESP имеет простой API для обнаружения мобильных устройств. API возвращает простой логический результат TRUE, если устройство указанный тип, или FALSE, если это не так. Например, хотите знать, если Ваш посетитель на устройстве iPhone, Android или Windows Phone? Просто используйте метод DetectTierIphone ().

Надеюсь, вы найдете эту информацию полезной.

...