Как с bootstrap или без увеличить все элементы страницы для мобильных устройств?

Question

[Villian_Os]

Здравствуйте, первый раз встречаюсь с такой проблемой, что на телефоне элементы сайта все мелкие из-за разрешения экрана, думал использовать media на cantainer bootstrap

@media (max-device-width: 480px) {
  .container {
    transform: scale(1.2);
  }
}

Но никак не получается правильно, имеется может какой-то класс для мобильных устройств от bootstrap?

Comments

[Вадим]

Может у Вас просто проект где не стоит мета тэг для адаптива?

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

[Villian_Os]

Вадим, А как конкретно для контейнера сделать?

[Вадим]

Villian_Os, что именно для контейнера? Ну и информации маловато. Фактический результат не предоставлен, ожидаемый результат даже не описан.

[Villian_Os]

Вадим, А нашёл, разобрался, Пасиба

[Villian_Os]

Во блин, подождите, как так то, на локальном сервере в хроме тестил всё норм, на хостинг залил, открыл на айфоне и только svg масштаб меняет, как так-то

[Villian_Os]

Вадим, Вот так я делал и получается ужас

@media (max-device-width: 480px) {
  .container {
    zoom: 1.8; /* same as initial-scale=1 */
    width: device-width;
  }

[Вадим]

Без понятия что Вы делаете.
Примера Вы не даёте.
А мой волшебный шар по пятницам не работает.

width: device-width; - нет такого значения.

Мета тэги пишутся в head.

[Villian_Os]

Вадим, Мне требуется сделать так, чтобы все элементы, которые в container, адаптивно увеличились в размере, когда пользователь заходит на сайт с телефона.

[Villian_Os]

Вадим, Если я просто вписываю:

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

То вообще все элементы на сайте увеличились, и выглядит всё как каша

[Вадим]

Villian_Os, Если увеличить все элементы с помощью scale - то это не надёжно, могут наезжать друг на друга а так же становиться размытыми.

Увеличит контейнер и всё содержимое внутри если размер вьюпорта будет 480 и меньше

@media (max-width: 480px) {
  .container {
    transform: scale(1.2);
  }
}

[Villian_Os]

Вадим, при 1.2 всё выглядит не намного больше, увеличил до 1.5, но у меня задевать стал контейнер навбар и нижний футер, как так, я не понимаю

[Вадим]

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

[Villian_Os]

Вадим,
Так а можно сделать так, чтобы:

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

Было в пределах контейнера?

[Вадим]

Villian_Os, нет.