Как работает vieport для сайта с min-width?

Question

[Ольга Жижка]

Добрый день всем!
Помогите пожалуйста уточнить такой вопрос:
Есть сайт у которого задано:

body {	
	min-width: 768px;
}

А в head vieport задан как:

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

В результате сайт на устройствах шириной до 768px отображается на всю ширину, а на устройствах меньше соответственно на ширину 768px.
Собственно у меня вопрос такой, чтобы сайт дальше адаптировался под ширину менее 768px, нужно поменять min-width и добавить для сайта соответствующие медиа-запросы, правильно?

И еще такой вопрос, можно ли сделать так, чтобы сайт до 768px открывался по ширине, а на устройствах с шириной менее масштабировался (сжимался и помещался на весь экран)

Спасибо большое за ответы!

Answer 1

[Elesei]

У вас минимальная ширина body составляет 768px. Меньше этого значения оно не может быть. Соотвественно вам необходимо поменять значение либо на допустимую минимальную ширину либо совсем убрать "min-width: 768x;". И если я правильно понял, во втором вопросе, то у вас и так стоит 'width=device-width, initial-scale=1.0', а это значит подгон под размер девайса и отключение возможности приближения. если у вас не адаптированный под маленькие размеры сайт то я бы рекомендовал убрать 'initial-scale=1.0'. В любом случае убирайте min-width, судя по вопросам это вам только мешает.

Comments

[Ольга Жижка]

спасибо Вам за ответ, решение убрать initial-scale=1.0, и min-width: 768 в общем более всего подходит в моем случае

Answer 2

[Mr Crabbz]

К чему делать min-width: 768px, если на более мелких устройствах вам всё равно нужно уменьшать эту ширину?

обычно я делаю так примерно:
если экран больше например 768 пикселей - делаем body: max-width:768px;
далее медиазапросы:
если экран меньше 768 - body:max-width: 100%

А min-width применяется например для задания "нижней планки" - минимально допустимого устройства. У меня это обычно min-width: 320px;

Comments

[Ольга Жижка]

Спасибо большое Вам за совет, приму на заметку, чтобы потом доработать адаптивность этого сайта. Пока воспользовалась советом убрать min-width и Initial-scale