Мобильная версия сайта + адаптивная + версия для компьютера, все вместе?

Question

[Александр]

Задача такая, по умолчанию всем пользователям показывать обычный дизайн сайта, (он будет адаптивный Media Queries), тут проблем нет. Но вот все остальные гаджеты (гаджеты динозавры) которые не поддерживают CSS3 и Media Queries, отправлять на мобильную версию сайта m.site.ru.
Или можно любым другим способом, по сути нужно детектировать девайсы динозавтры, и только их отправить на m.site.ru.
Как такое сделать средствами js и/или php?

За участие всем спасибо, но то что вы предлагаете это не тот вариант, видимо такой изврат никому не нужен. Скорее всего придется перезагружать страницу при первом входе пользователя с нормального гаджета. Если найду более изящное решение поделюсь.

Answer 1

[Денис Инешин]

Где вы сейчас найдете такие гаджеты динозавры? caniuse.com/usage-table
Какое есть экономическое обоснование поддержки этих динозавров?

ИМХО, смысла нет совершенно. Разделять сайт четко на мобильную и десктопную имеет смысл только в том случае, если вы реально хотите экономить трафик и делать приложения для мобил более отзывчивыми и потребляющим меньше ресурсов (любая чисто адаптивная версия тянет в себе много лишнего кода).

Comments

[Александр]

не хочу вступать в споры, есть заказ, нужно сделать.

[Денис Инешин]

lebonnet: в таком случае сделайте m.site.ru для всех. Будет выгода в скорости загрузки как для десктопа, так и для всех мобил.

[Александр]

я думаю тоже сначала по заголовку "User-Agent" на php детектировать все мобильные и отправлять их на m.site.ru, а потом js-скриптом на стороне клиента вычислять поддерживает ли он Media Queries, и ставить куку если поддерживает. Но тут нужно будет второй раз страницу перезагрузить, что мне совсем не нравится. Вот ищу изящное решение)

[Денис Инешин]

lebonnet: не нужно ничего перезагружать для тех кто не поддерживает. При подходе mobile-first старые браузеры увидят вполне себе нормальную версию. А современные еще и будут перестраиваться например при повороте экрана.

[Justin Bieber]

caniuse.com/usage-table на сколько информация точная? неужели оперой никто не пользуется кроме меня :D

[Александр]

Денис Инешин: видимо я не совсем улавливаю мысль, попробую донести еще раз о чем я. На сервере по "User-Agent" можно понять что это мобильник или нет, затем отправить на адрес site.ru или m.site.ru, но поскольку на поддомене m.site.ru я хочу оставить только старые гаджеты, то придется после загрузки страницы определить (на клиентской части) поддерживается ли "Media Queries", если да, то ставится кука и происходит переход на site.ru. Оставлять современные устройства на m.site.ru очень бы не хотелось.

[Денис Инешин]

lebonnet: почему не хотелось бы? Общий домен для мобилок и десктопа делают только в том случае, если особо не заморачиваться. Реально большие сайты с огромными аудиториями никогда так не делают.

Всегда нужно помнить о том, что даже самые топовые смартфоны сильно зависят от качества интернет соединения, и желательно передавать им только те данные, которые им нужны. Это экономит трафик и ускоряет загрузку страниц. Далеко не все сидят на своих мобилках в пределах четкого LTE или WIFI

[Александр]

Денис Инешин: я вас понял, но нужно именно отличить старые устройства, и отсечь их в поддомен, у них будут минималистичные css, м.б. другой шаблон даже.

[Денис Инешин]

lebonnet: все же добавлю, минималистичный дизайн для супер старых девайсов можно сделать и в рамках graceful degradation (нет теней, скругленных углов, трансформаций и пр.) Это сэкономит трудозатраты.

Answer 2

[Александр]

есть неплохая библиотека mobiledetect.net
с ее помощью можно проверить мобильное ли это устройство

// Any mobile device (phones or tablets).
if ( $detect->isMobile() ) {
 // шаблон для мобильного
}
else{
// шаблон для десктопа
}

и потом подстваить нужный шаблон

Comments

[Александр]

такой вариант не подходит, нужно только старые девайсы редиректить на m.site.ru а современные оставлять.

[Александр]

возможно тогда вам подойдет Modernizr https://habrahabr.ru/post/144352/

[Александр]

Александр: спасибо, но есть более лаконичный способ определить поддержку "Media Queries"

Answer 3

[Алексей Уколов]

https://modernizr.com/download?mediaqueries-setclasses