@RoadMoscow

Почему не адаптируется сайт на bootstap 3?

Здравствуйте. Есть сайт который давно нам верстали на bootstrap. Подскажите пожалуйста почему в рарешении 320px он не адаптируется и не увеличивается как-то по экрану.

Проставили
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


Но там вроде был изменен файл bootstrap мы подключили другой с офф сайта.

Посмотрите и подскажите пожалуйста))
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 5
  • coll3ctor
    @coll3ctor
    Указанный вами тег для viewport вполне дефолтный корректный и на то, чтобы ваш макет "складывался" влиять не должен.

    Судя по коду вёрстки, ваш сайт и не должен адаптироваться. Там просто нет необходимого "функционала".
    Вы используете только классы типа col-xs-12, которые не покрывают весь спектр разрешений (см. тут), из всего, что есть, у вас только col-xs-12 на главной.
    Возможно, сайт никогда и не складывался и его текущий вид такой - да и всё на этом ?
    Ответ написан
  • bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    а почему, если бутстрап, то сайт обязан адаптироваться? Смешное утрверждение. У сайта задана минимальная фиксированная ширина. Её можно увидеть, если уменьшать сайт в браузере. У вас появится полоса прокрутки внизу
    Ответ написан
  • @weranda
    На сайте у некоторых элементов задана фиксированная ширина и минимальная ширина — "неадаптивное в адаптивном". Вот пример:
    5a7029463286a493769895.png
    Ответ написан
  • aixman
    @aixman
    Разарботичк сайтов с 8летним опытом жизни в WEB'е
    Добрый день.

    как посмотреть, что можно изменить для корректного отображения
    при просмотре в firefox (в режиме мобильного - для этого нажмите CTRL+SHIFT+M)
    видно как сайт отображается на смартфонах с разрешением в 320px
    чтобы узнать причину, почему тот или иной блок "не складывается" в мобильном нажмите на блок правой кнопкой мыши и выберите "исследовать элемент".

    В появившемся инструментарии разработчика вы увидите, как ведет себя элемент верстки в данном разрешении. И так же увидите в каком файле css и на какой строке требуется внести изменения.
    В этом же редакторе вы можете поиграться и изменять параметры без изменения CSS файлов (некая песочница), чтобы понять: к чему приведут изменения.

    например элемент BODY обладает стилями на разрешении 320 (как показывает FireFox эти стили находятся в файле roadto.alfaecology.ru/assets/theme/css/app.css в строке 38)
    body {
        color: #000;
        font-family: 'GillSans';
        max-width: 1280px;
        margin: 0 auto;
        font-size: 16px;
       min-width: 940px;
    }

    что значит, что даже на разрешении 320 пикс у браузера BODY будет иметь min-width (минимальную ширину в 940px)

    попробуйте в редакторе CSS-кода FireFox поиграться шириной этого тэга на нужных разрешениях и вы увидите результат.

    И так далее следуйте по каждому блоку (и его родителям, в которые он упакован), который выходит за пределы требуемой ширины.

    чтобы задать специальные условия в CSS для нестандартных разрешений упаковывайте специальные условия для того же тега BODY в CSS блок в конце CSS файла
    @media screen and (max-width: 320px) { 
            body {
    		min-weight:320px;
    	}
    }


    Важно. Условие в 940px для больших разрешений удалять не требуется! Браузер поймет и отдаст приоритет тому разрешению, которое описано в параметре @media screen
    Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы