2

Добрый день, уважаемые специалисты. Я в ступоре, ибо не могу понять как работает адаптивность на моем сайте.

Итак, что я делаю:

В хедере есть следующее:

<meta name="viewport" content="width=device-width, maximum-scale=1.0">

В медиа-запросах прописал такое:

@media only screen and (max-width : 992px) {
#sidebar {
    display: none;
}

#wrapper {
     width: 98%;
}

#content {
float: none;
  width: 100%;
}

}

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

В чем же проблема?

Проблема заключается в том, что при таком раскладе все работает как надо, а сам контент растянут на 100%, но его плохо видно, т.е. для того, чтобы его посмотреть нужно увеличивать вручную на телефоне.

Вот как выглядит и как хотелось бы:

введите сюда описание изображения

Я понимаю, что это не совсем адаптив и не претендую, просто хоть немного сделать удобнее сайт для пользователей хочу.

Понимаю, что решение на поверхности, но не вижу его. Спасите!

1
  • Почитаете, на хабре есть отличная статья. Я все сайты делаю по этому принципу, Commented 25 июн. 2015 в 15:26

2 ответа 2

3

Итак, отвечаю сам на свой вопрос. Я перелопатил весь код и в одном из файлов нашел ужасающий момент...

    html {

    min-width: 1000px;
}

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

Сейчас все стало отлично. Поправить пару моментов и будет лайт-пример мобильной версии. Всем спасибо за внимание, читайте свой код! =)

2
  • 2
    На будущее, не надо лопатить весь код, просто откройте веб-инспектор в Хроме, там есть закладка computed style, где показана ширина всех элементов. Начните с <html>, <body> и далее по порядку - если у них задана фиксированная ширина, это будет сразу заметно при ресайзе. Как только найдете фиксированный элемент - правьте его свойства налету. А потом уже в коде копайтесь =) Commented 26 июн. 2015 в 9:51
  • Спасибо, я веб-инспектор использую, но просто не ожидал увидеть в html теге какие-то свойства.
    – Seredniy
    Commented 26 июн. 2015 в 14:32
2

...понять как работает адаптивность на моем сайте.

Их нет там :)

Почитайте.

Варианта три:

  • оставить только width=device-width,
  • переделывать верстку,
  • мобильный вариант сайта.

UPD: ответ на комментарий

В верстке Вашего сайта основные элементы интерфейса "прибиты" намертво, то есть шаблон для сайта создавался для определенного мин. разрешения экрана по горизонтали (у "пациента" 980 или 1000px).

И при включении initial-scale=1 (см. ссылку), часть содержимого выходит за пределы экрана (меньшего 1000px), появляется горизонтальный скролл.

"Другие" сайты избегают этого более сложной логикой верстки основанной, в том числе на процентном соотношении размеров элементов к размеру экрана.

Принимаемые выше меры недостаточны для появления "адаптации для просмотра на разных устройствах" (c). Соответственно, смотрите варианты выше (забыл и добавил про мобильный вариант).

6
  • width=device-width даже если просто остается - ничего не меняется. Что увеличивать то? У гугла говорят поставить контейнерам 100% ширину. Поставил, но... такая же ситуация
    – Seredniy
    Commented 25 июн. 2015 в 13:40
  • Увеличивать- это ручками по экрану, как у вас сейчас. Гугл советует initial-scale=1 .
    – leks
    Commented 25 июн. 2015 в 13:52
  • Хорошо, как же тогда на других сайтах это работает?) в чем разница - не могу уловить, помогите!
    – Seredniy
    Commented 25 июн. 2015 в 13:55
  • Добавил в ответ.
    – leks
    Commented 25 июн. 2015 в 14:43
  • Ну так я для меньших экранов делаю ширину резиновой, почему же намертво?) Если и было намертво - переопределил же
    – Seredniy
    Commented 25 июн. 2015 в 14:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.