DanyGersh
@DanyGersh
Что-то пробую в Front End

Как сделать при при достижении минимальной ширины, контент уменьшался?

6152ea7786019326587299.png Имеется сайт с адаптивом. На устройствах где ширина больше чем 375 пикселей (iPhone X), контент отображается нормально, но где меньше (например Galaxy Fold где 280) уже все плохо. Как можно сделать так что если ширина устройства меньше 375 пикселей, то контент оставался такого же размера? Если я задаю для body "min-width: 375px", то контент вылезает за пределы Вьюпорта.
Конкретнее: если ширина экрана меньше 375, то контент будет уменьшатся с пропорциями как при 375 пикселях.
Иначе выходит как тут:
6152f1f1cca6d828661655.png

Медиа запросы используются
P.S: я начиающий фронт-энд разработчик
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
  <script type="text/javascript">
    (function () {
      if (screen.width <= 375) {
        const metaViewport = document.createElement('meta');
        metaViewport.setAttribute('name', 'viewport');
        metaViewport.setAttribute('content', 'width=375, initial-scale=1, minimum-scale=1');
        document.head.replaceChild(metaViewport, document.querySelector('meta[name="viewport"]'));
      }
    })();
  </script>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы