Можно ли определять версию для ПК в хроме на мобиле через медиазапрос?

Question

[Сергей Арсентьев]

Если в мобильном браузере включить версию для пк - то блок визуально продолжает грузиться как для мобильного режима, в верстке работают стандартные запросы типа media screen and (min-width: ) ....

А хотелось бы чтобы в мобиле при выбранной версии для пк - грузилась обычная декстопная версия блока.
можно ли это дело как-то регулировать медиазапросами?
или есть какие-то другие проверенные css и html решения?

Comments

[Ankhena]

в верстке работают стандартные запросы типа media screen and (min-width: ) ....

Как я люблю такие фразы...

И на какой стандартной ширине у вас начинается десктопная версия?

[ThunderCat]

Ankhena, 640х480 конечно, какие могут быть варианты то )

[Ankhena]

ThunderCat, какое у вас хорошее зрение, видите, что там в коде :)

[Сергей Арсентьев]

Ankhena, 1180

[Ankhena]

Сергей Арсентьев, надежно

Теперь нужно взять вот эту ссылочку https://www.esolutions.se/en/test
открыть в браузере, посмотреть, что покажет

Потом поставить галку про ПК версию, обновить страничку и снова посмотреть что там с шириной вьюпорта.

Протестировать на разных устройствах.
Сделать вывод.

[Сергей Арсентьев]

Ankhena, спасибо, а что такое Browser Window? что это за разрешение?
дело в том, что я не очень понимаю, как работает в принципе версия для пк, что она подменяет в странице -
вот как в похожем вопросе https://qna.habr.com/q/638928, что она делает эта версия для пк, что весь сайт с адаптивной версткой становится десктопным, а один блок остается мобильным?

[Ankhena]

Сергей Арсентьев, галка меняет размер вьюпорта. Возможно, как-то еще себя идентифицирует. Но если у вас адаптив построен только на медиа и нет отдельных версий, то важно только первое.

[Сергей Арсентьев]

Ankhena, я просто не очень понимаю момент - вот сайт https://samara777.ru
на нем есть чат - справа внизу.
сам сайт адаптивный, и чат тоже адаптивный.
все через media определяется.
то есть в мобиле сайт и чат выглядят по одному, в десктопе по другому.

но если выбрать "версия для пк" - то сайт становится декстопным, а чат остается в мобильном виде https://disk.yandex.com/i/WYilNcjYzpQHhA
вот и думаю, через средства css с этим что-то можно сделать и главное - почему так получается, почему на чат viewport общий не действует что ли ?

[Ankhena]

Сергей Арсентьев, они определяют устройство, а не просто по media.

Answer 1

[Sozdavan]

В CSS можно использовать медиа-запросы для настройки макета веб-страницы в зависимости от размера экрана устройства. Используя правило media и указав значение min-width или max-width, вы можете применять к веб-странице разные стили в зависимости от размера экрана. Например, вы можете использовать следующий медиа-запрос для таргетинга на устройства с шириной экрана больше или равной 600 пикселям:

@media screen and (min-width: 600px) {
  /* styles for devices with screen width >= 600px */
}

Другой подход заключается в использовании JavaScript для определения типа устройства пользователя и последующего применения соответствующих стилей. Также можно использовать фреймворки или библиотеки, такие как Bootstrap, Foundation, Bulma и т. д., у них есть классы и функции адаптивного дизайна, которые могут помочь в этом вопросе. Также важно помнить, что во всех случаях необходимо учитывать удобство работы с пользователем. Рекомендуется использовать подход, ориентированный на мобильные устройства. Это означает, что сначала необходимо разработать макет для мобильных устройств, а затем постепенно улучшать его для больших экранов.