Как избавиться от масштабирования фона на мобильных устройствах?

Question

[Дима Паутов]

Все привет. Меня преследует уже около года одна и та же ошибка, которую я допускаю при верстке и не знаю как ее исправить.

Открываю сайт на телефоне и вижу вот такую картину:



На компе все супер. Никаких адаптивных стилей в шаблоне нет! Вставил мета тег

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

но он не помог! Кто знает, как бороться?

Answer 1

[Oogway]

Попробуй так,

html {
    min-width: ширина контейнера;
}

Comments

[Дима Паутов]

почти помогло, остался небольшой пробел. Но как не подгоняй минимальную ширину, все никак!

[Артем Лисовский]

кинь ссылку, попытаемся помочь

[Oogway]

@bootd попробуй ширину фона указать, или в viewport указать ширину в пикселях, если не адаптивный сайт, а вообще кинь ссылку, чтобы не гадать

[Дима Паутов]

sobakus.ru/landing/5/index.html

[Oogway]

@bootd 1600px, по ширине фона

[Дима Паутов]

Да, помогло. Но конечно не идеально, дело в том что теперь он при масштабировании(когда на экран 2раза тыкаешь, что бы уменьшить или увеличить масштаб), на уменьшенном приходится его прокручивать влево. Это нормально, учитывая минимум ширины. Спс вам.

Answer 2

[Alex Danilin]

Может помочь такая директива CSS:
background-size: contain;
Или
background-size: cover;
Управляет тем, масштабируется или нет фоновое изображение.

Comments

[Дима Паутов]

пробовал, никак!