2 вёрстки для разных устройств нужно выложить на хостинг

Question

Что делать, если вёрстка для мобилок очень отличается от других размеров (десктопа, планшета и т.д.). Заказчик решил сделать для мобилок совсем другой сайт, но как разместить 2 разных сайта на одном адресе, чтобы для каждого устройства открывался соответствующий.

P.S. про медиа запросы знаю, они не могут, сайты действительно очень разные.

Пока что из идей у меня только сделать 2 блока, в них поместить вёрстки 2 разных сайтов и сделать медиа запрос для каждого, но это кажется неправильным.

Answer 1

в общем случае задача решается следующим образом:

анализ разрешения
выдача соответствующей верстки // может быть и редирект на другой сайт

упрощенно, если делать сайт на Вордпрессе, есть готовые плагины, позволяющие переключать темы в зависимости от разрешения // настраиваемого

Answer 2

Можно сделать подключив JQuery к вашей основной верстке:

Добавить скрипт на страницу:

$( window ).resize(function() {
       checkPosition();
});
$( window ).ready(function () {
       checkPosition();
});
     function checkPosition() {
        if (window.matchMedia('(max-width: 1200px)').matches) {
            window.location.replace("http://ваша_верстка_для_мобильных")
         }

max-width укажите тот, который нужен в вашем случае.

Answer 3

Мобильную версию выложить на поддомен и использовать теги <link> для указания различных URL с атрибутами rel="canonical" и rel="alternate".

Подробнее об этом читайте на сайте developers.google.com. Получится именно так, как вам надо. Замечу, однако, что использовать данную технику - это прошлый век, а продвигать такие сайты мучительно долго и дорого. Легче заново переписать код под адаптивную верстку. Но заказчику конечно виднее :)

Answer 4

Вам нужно в главном файле index.php сделать проверку устройства пользователя, и в соответствии с результатом перенаправить юзера на нужную версию сайта. Сами версии для разных устроойств розкидайте по разным папкам:

/mobile/
/pc/
index.php

А в index.php добавьте код проверки устройства:

function isMobile() { 

return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

if(isMobile()){
    header("Location: /mobile/"); // переход на моб версию
}
else { 
header("Location: /pc/"); // переход на пк версию
 }

Answer 5

Элементарная проблемма: если в куках\гетах\субдоменах не указана версия wap\wml\pda\web то перенаправляем пользователя на страницу определения (либо в ядре цмс запускаем функцию), которая переадресует пользователя както так mysite.dot/pda/index.php \ mysite/index.php?version=pda \ pda.mysite/index.php либо изменит переменную $path_tempelate='pda'. Вариант с переадресацией не хорош так как у некоторых может стоять запрет отслеживания и ты не увидишь реферер, что все убъёт все переходы с гугла. Так же рекомендую версию определять не по браузеру и оси, а по размеру экрана+ учти что мобильная версия должна быть очень лёгкой: 100кб на страницу максимум(ибо с мобилы не всегда вайфай).

Answer 6

По правильному лучше всего использовать стили css для отображения той или иной вёрстки в зависимости от разрешения экрана: @media (max-width: 1024px){display:...} Соответственно разместить обе вёрстки на одной странице и регулировать стилем которая из них будет отображаться

Answer 7

Первое что пришло в голову - обернуть разные "страницы" и показывать их в зависимости от ширины экрана.

<div class="maxWidth1980">
Тут контент для декстопа
</div>

<div class="maxWidth768">
Тут контент для мобилы
</div>

<style>
.maxWidth768{
display:none;
}
@media (max-width:768px) {
.maxWidth1980{
display:none;
}
.maxWidth768{
display:block;
}
}
</style>

БЛОГ НА HUSL

2 вёрстки для разных устройств нужно выложить на хостинг

Ответы (7 шт):