Блог

Немного предыстории: я студент, который вызвался переделать веб-сайт, который используется моей внеклассной командой робототехники. Я впервые создаю и работаю с Bootstrap и адаптивным дизайном в целом, и, на мой взгляд, все шло очень гладко, пока я не загрузил веб-сайт в тестовый домен и не просмотрел его на мобильном устройстве.

Проблема, с которой я сталкиваюсь, связана с шириной панели навигации и контентом на веб-сайте в зависимости от ориентации устройства. Когда устройство находится в портретном режиме (вертикальном), панели навигации и контенту не хватает места в тексте, и, как следствие, страница становится очень длинной и занимает много места. С другой стороны, когда устройство находится в альбомной ориентации (на боку), веб-сайт, по крайней мере, я считаю, что все в порядке:

http://imgur.com/gallery/toZYt (альбом, поскольку я не могу опубликовать более двух ссылок прямо сейчас, показывает фотографии проблемы с большей (визуальной) детализацией)

Я экспериментировал с областью просмотра / начальным масштабом веб-страницы, и хотя это меняет ширину панели навигации и содержимого, текст / логотип панели навигации сжимается и также выглядит относительно низкого качества. Изменение минимальной / максимальной ширины носителя, похоже, ничего не дает. Я застрял в том, как это исправить, и является ли это проблемой @media или связано с моим CSS для меню / содержимого. У меня есть поле в 125 пикселей для содержимого в моем основном CSS CSS, в основном для того, чтобы сайт на рабочем столе выглядел красиво, так что, может быть, это связано с чем-то?

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

Я обнаружил, что проблема сохраняется на других телефонах (протестировано на OnePlus X, iPod 5-го поколения и iPhone 6), но не смог протестировать ее на планшетах. Если у кого-нибудь есть какие-либо предложения для меня, которые решат эту проблему на веб-сайте, я буду очень признателен. Спасибо за чтение!

Вам нужно изучить медиа-запросы CSS. Есть несколько вещей, которые вы должны исправить, в том числе поле в 125 пикселей.

Например, этот запас слишком велик для мобильного устройства, поэтому вам следует сделать следующее:

 .element {
  margin: 0 15px; /* Default margin */
}

@media only screen and (min-width: 1024px) {
  .element {
    margin: 0 125px; /* Margin for displays > 1024px */
  }
}
 

Вы можете задать несколько мультимедийных запросов, которые влияют на один и тот же элемент. Чтобы продолжить приведенный выше пример, у вас может быть еще один запрос @ 1280px:

 /* ... */
@media only screen and (min-width: 1024px) {
  .element {
    margin: 0 125px; /* Margin for displays > 1024px */
  }
}

@media only screen and (min-width: 1280px) {
  .element {
    margin: 0 200px; /* Margin for displays > 1280px */
  }
}
 

Хороший способ отладки макетов с более низким разрешением — это использование встроенного адаптивного представления вашего браузера.
Теперь это можно сделать во всех основных браузерах, например, в Chrome вам нужно открыть инструменты разработки (Ctrl Shift I или Cmd Opt I) и нажать на значок телефона планшета в левом верхнем углу.

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

1: (сначала удалите .navbar-brand> встроенный стиль img (максимальная ширина и верхнее поле)

 .navbar-brand img {  
  max-width: 200px;
  margin-top: 14px;
}

@media only screen and (min-width: 440px) {
  .navbar-brand img {  
    max-width: 350px;
    margin-top: 7px;
  }
}
 

2. Отрегулируйте заполнение границ для экранов меньшего размера

 .border-control {
  padding-left: 15px;
  padding-right: 15px;
}

@media only screen and (min-width: 768px) {
  .border-control {
    padding-left: 125px;
    padding-right: 125px;
  }
}
 

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