Как сделать адаптив для сайта?

Question

[viktorulyushev]

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

Answer 1

[Ankhena]

По скрину немножко не видно что у вас в коде на тему ширины обычного сайта и что вы написали во вьюпорте и медиа.

Comments

[viktorulyushev]

вот сайт gemainvest.ru
вьюпорт

что нужно сделать чтобы его сделать адаптивным?

[viktorulyushev]

meta name="viewport" content="width=device-width,initial-scale=1"

[Ankhena]

viktorulyushev: content="width=1000px"

[Ankhena]

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

[viktorulyushev]

Ankhena W: это у wrapper?мне просто нужно чтобы он помещался в область просмотра,и тянулся,а медиа запросами я уж сделаю как мне надо было,а не так как на скриншоте

[viktorulyushev]

Ankhena W: ааа,это для вьюпорта прописать?но разьве так можно делать?

[Ankhena]

viktorulyushev: Во-первых, можно, во-вторых, попробовав вы ничего не теряете.

[viktorulyushev]

Ankhena W: да получилось,растягивается и медиа запросы видит,но знаете все равно чувство что что то не так

[Ankhena]

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

[viktorulyushev]

Ankhena W: хотя нет,все так же осталось как на скриншоте,просто теперь видит все мои медиа запросы

[viktorulyushev]

Ankhena W: в общем мне просто нужно чтобы сайт видел мои медиа запросы,без вьюпорта он их не видит,точнее видит только с 990 и выше,нужно добавить вьюпорт так чтобы он так же сжимал весь сайт и видел мои запросы,как это сделать?

[viktorulyushev]

Ankhena W: например если я вставлю meta name="viewport" content="width=1000" то сайт не видит мои медиа запросы которые max-width: 992px и max-width: 500px

[Сергей delphinpro]

viktorulyushev: Естественно он их не будет учитывать! Вы же прямо говорите браузеру - "Браузер, будь любезен, считай, что область просмотра равна 1000 пикселей, вне зависимости от реальности".

[Сергей delphinpro]

viktorulyushev: Хотите полной адаптивности, пишите width=deivce-width
А то, что сайт выглядит увеличенным, то, скорее всего есть элементы, которые не влазят в область вьюпорта. Смотрите в инспекторе и исправляйте.
Лучше всего такие вещи отследить в хроме в режиме адаптивности с опцией Desktop

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

[viktorulyushev]

Сергей: мне не нужна полная адаптивность,мне просто нужно чтобы он видел мои медиа запросы...

[Сергей delphinpro]

viktorulyushev: Надо определиться. Либо вам нужен адаптивный сайт. Либо вам просто нужно вписать сайт в область просмотра (в этом случае и делать-то ничего не нужно)
ps
Если вы разработчик, вам бы стоило почитать о том, что такое viewport и какие они бывают.

[viktorulyushev]

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

[Ankhena]

viktorulyushev: если вы ставите media, то вьюпорт device-width

Answer 2

[Иван Бабий]

Разберите для себя такой фреймоворк как Bootstrap, с ним и работайте