Как сделать до 576px мобильныую версию, а после 576 pc?

Question

[Jevgenii]

Подскажите как применить() до 576px, а 576< не применять, чтобы была pc версия

Comments

[Ankhena]

Что вы называете мобильной версией?

Если адаптивная верстка, то использовать media условия.
Идея с подменой meta viewport да, работает, но выглядит как помойка.

Если действительно отдельная мобильная версия, то выяснять ширину окна и перенаправлять или гуглить по запросу "как определить тип устройства".

Хорошо бы знать что именно у вас не получается.

[Jevgenii]

Ankhena, я пока что ничего не сделал чтобы не получалось. Мне нужно чтобы до 576px была моб версия (через медиа сделаю адапив), а вот после 577px размер сайта не должен быть равен размеру экрана, а должен быть равен 1000px. Ну ты по-любому видел как на некоторых сайтах приходится с телефона двумя пальцами увеличивать экран

[Ankhena]

Jevgenii, Вам Сергей даже прямо готовый скрипт давал. Его надо было просто взять и адаптировать под ваши числа.

[Jevgenii]

Ankhena, я все таки разобрался, но это только решение одной проблемы - теперь контент сайта = допустим 1000px всегда. А мне нужно чтобы, до 576px я мог адаптировать его

[Ankhena]

Jevgenii, воспользуйтесь скриптом Сергея и заменяйте в meta viewport ширину c 1000 на device-width при шиирне меньшей 576.

[Jevgenii]

Ankhena, можно по подробнее. Я что то все-таки не понимаю куда надо.

[Ankhena]

Jevgenii,

условие ? выполнение условия if  : выполнение условия else

[Ankhena]

Jevgenii, ваша ошибка понятна?

[Jevgenii]

Ankhena, нет. Я вроде разобрался, должно быть так:
Но все равно не работает. Если я использую скрипт, meta, обозначенный стрелкой должен быть закомментирован?

[Ankhena]

Jevgenii, Этот код можно засунуть в гугло переводчик, уже будет понятно о чем каждая из строчек. Даже JS знать не надо.
И еще, гораздо быстрее провести эксперимент. С закомментированным и нет. дел на 2 минуты.
Инструменты разработчика открыть не предлагаю.

Нет, он не должен быть закомментирован.

[Jevgenii]

Ankhena, я тебя прошу, помоги. Я сделал так:
получается если ширина меньше 576px то прописывается device-width, а если нет то 1920. Все вроде правильно. НО получается, что всегда ширина контента 1920px

[Ankhena]

Jevgenii, брррр
По-моему, дело в том, что вы не понимаете как работает meta viewport. Если так, то статей много, почитайте.
Либо проверяете не корректно.

https://ruseller.com/lessons.php?rub=2&id=1560

И почему ставите 1920?
Это минимальная ширина?

Answer 1

[Anubis]

В less и sass так:

.some-class {
  // До 576
  color: cyan;
  font-size: 20px;
  // От 576
  @media (min-width: 576px) {
    color: red;
    font-size: 14px;
  }
}

Answer 2

[archelon]

гугл: медиазапросы
например, https://html5book.ru/css3-mediazaprosy/

/*стили для всего сайта*/
      @media screen and (max-width: 576px) {
        /*внутри этой секции стили только для мобильной версии до 576px*/
      }

Comments

[Jevgenii]

я так понял создать пустой meta в шапке и до 576 заменить его да?

[archelon]

Jevgenii, внутри тега head:

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

стили в файле css:

@media screen and (max-width: 576px) {
       ...
      }
 /*css код внутри этих фигурных скобок применится только для ширины окна 576px и меньше*/
/*есть смысл создать несколько таких правил для разных разрешений*/

Answer 3

[Николай]

Можно сделать, что-то типо такого

<meta id="myViewport" name="viewport" content="width = 1920">

<script>
window.onload = function () {
    if (screen.width < 577) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content','width=device-width, initial-scale=1.0');
    }
}
</script>

Answer 4

[Иван Иващенко]

Ох, не люблю я, когда javascript участвует в вёрстке! Посмотрите в сторону browscap.ini. Он прекрасно определяет мобильные девайсы.