Есть пк версия сайта и телефонная. Как настроить так чтобы при входе на сайт с телефона открывалась версия для телефона?

Question

[HaGrinoling1234]

Есть пк версия сайта и телефонная. Как настроить так чтобы при входе на сайт с телефона открывалась версия для телефона?

Answer 1

[Refguser]

На сайте есть какой-то функционал , который не должен быть доступен на "противоположном" устройстве?

Если нет - не нужно делать разные версии. Нужна одна, адаптивная.

Если же да, то определять необходимые возможности устройства.

Answer 2

[VoidVolker]

Использовать специальную библиотеку для определения клиента - мобильный или десктоп. Например: detectmobilebrowsers.com

Comments

[HaGrinoling1234]

Как это сделать? Я не знаю JS

[VoidVolker]

HaGrinoling1234, выучить JS или нанять того, кто умеет.

[Сергей delphinpro]

HaGrinoling1234, там есть варианты для разных языков, не обязательно js

[maksam07]

Сергей delphinpro,

там есть варианты для разных языков, не обязательно js

судя по тегам, он и других языков не знает, только html и css

Answer 3

[alexalexes]

Сделайте дизайн сайта адаптивным, привязанный к некоторым реперным точкам ширины экрана.
https://bootstrap-4.ru/docs/4.0/layout/grid/
PS: Не обязательно использовать bootstap - можно использовать голые media-запросы, просто подсмотреть, какие ширины использовать в условиях media-запросов.
PPS: Если есть особые элементы дизайна, которые не привязаны к 12-и колоночной сетке, то можно использовать другие реперные точки ширины, чтобы для вашего случая был свой сценарий изменения ширины элементов при переходе от одной ширины экрана к другой.

Comments

[Михаил Р.]

https://bootstrap-4.ru/docs/4.0/layout/grid/

Не официальная дока + Bootstrap 5 был официально выпущен 5 мая 2021 года.

Answer 4

[Вадим]

Обычно ориентируются по ширине экрана клиентского устройства. Например, 640px - телефон, 980px - планшет, 1200 - десктоп. В CSS используют блоки типа media (max-width: 640px) { настройки стиля для телефона } и т.п.

В готовых фреймворках типа UIkit или Bootstrap существуют готовые классы для быстрой и удобной адаптивной вёрстки.