Проблема с перенаправлением веб-сайта для мобильной или настольной версии?

Question

Эй, я сделал и настольную версию, и мобильную версию веб-сайта . Так что теперь, когда посетитель посещает мой веб-сайт, тогда как я узнал, что этот посетитель моего веб-сайта использует мобильный телефон или компьютер?

Чтобы быть более понятным, когда посетитель посещает через мобильный , он должен перенаправить посетителя на мобильную версию моего сайта , а если через рабочий стол , перенаправить на настольную версию сайта ? Как я могу это сделать? Я использую HTML5 и CSS для веб-сайта ма?

Любая помощь приветствуется?

ОБНОВЛЕНИЕ -> Что, если я хочу получить ответ через АГЕНТ ПОЛЬЗОВАТЕЛЯ ?

Answer 1

Вы можете использовать объект навигатора javascript для получения строки user-agent.(Единственная проблема, связанная с этим подходом, заключается в том, что вам придется обновлять список пользователей мобильных устройств каждый раз, когда изобрели новое устройство.) В следующем вопросе обсуждается обнаружение мобильного браузера с помощью пользовательских агентов. Автоопределение мобильного браузера (через агента пользователя?)

Answer 2

@ Geetanjali;у вас есть тег device-width & meta в вашем html, например:

<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" media"screen and (max-device-width: 400px)" href="mobile.css">
<link rel="stylesheet" media"screen" href="main.css">

Итак, когда пользователь открывает ваш сайт в мобильном телефоне, он вызывает mobile.css и перезаписывает main.css свойства длядля вашего мобильного сайта.

прочитайте эту статью, чтобы узнать больше http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/, http://webdesignerwall.com/tutorials/css3-media-queries

Answer 3

Существует 3 основных подхода:

1. Субдомен (стандарт m.domain.com).Отдельные просмотры оптимизированы для поддерживаемых вами мобильных устройств.Лучше всего всегда предоставлять ссылку с мобильного сайта на «полный» сайт.Вы также можете использовать файлы cookie для пользователей по своему предпочтению.

2. Обнаружение устройства Это может варьироваться от сверхмощных, таких как WURFL , до чего-то более простого, чем обнаружение устройства(обычно в строках агента пользователя).Снова предоставьте пользователю ссылку на «полный» сайт и настройки cookie.

3. Адаптивный дизайн Использование плавной сетки и медиазапросов создать Адаптивный дизайн , который обеспечивает хороший опыт для всех клиентов.

Из 3 подходов, я думаю, что Адаптивный дизайн в настоящее время имеет больше смысла, если вам не нужнодля поддержки функциональных телефонов, затем сочетание m.domain.com и Responsive Design.

Answer 4

Эта страница содержит некоторые приемы, касающиеся размера экрана и совпадений User Agent, которые можно использовать.