Как заставить кнопку полного сайта на сайте jQuery Mobile работать правильно?

Я разработал веб-страницу и мобильную версию одной и той же страницы (используя jQuery Mobile).

У меня есть код javascript, который определяет, использует ли пользователь мобильное устройство, а затем перенаправляет на мобильный сайт (mobile.html).

Но когда пользователь пытается перейти с мобильного сайта на рабочий стол или полный сайт, он открывает страницу, но выглядит неправильно... она как бы увеличена и смещена при просмотре на мобильном устройстве.

************The Javascript to detect mobile device************

var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
 if (mobile) { 
    document.location = "http://www.somedomain.com/mobile.html";  }
 }  




************jQuery Mobile button for Full Site ***************

<ul data-role="listview" data-inset="true">
        <li>
            <a href="http://www.somdomain.com/?view=full">Full Site</a>
        </li>
</ul>

Как сделать так, чтобы перенаправление на полный сайт выглядело так, как должно на мобильном устройстве?


person rjg132234    schedule 13.10.2012    source источник
comment
Привет помошник! Не могли бы вы показать скриншот?   -  person Littm    schedule 13.10.2012
comment
У меня нет скриншота, извините... Но вы можете попробовать сайт... это www.bobbyaudley.com   -  person rjg132234    schedule 13.10.2012


Ответы (3)


Очевидно, вы вернетесь на мобильный веб-сайт, потому что он запустит ваш скрипт обнаружения и перенаправит вас обратно. Вы должны использовать методы, чтобы избежать этого.

Вам нужно СКАЗАТЬ полный сайт, что вы только что пришли с мобильного сайта и НЕ хотите возвращаться.

Несколько примеров для полного сайта:

  • проверьте, установлено ли для параметра view значение полный. Если true, установите файл cookie или сеанс php, чтобы избежать запуска сценария обнаружения.
  • проверьте, является ли реферер мобильным веб-сайтом. Если true, не запускайте скрипт обнаружения.

Надеюсь, это поможет вам в пути.

person Gilly    schedule 30.10.2012
comment
Спасибо большое! Фактический код, который я использовал, приведен ниже. - person rjg132234; 01.11.2012

Благодаря Джиллиан Ло-Вонг я смог заставить работать следующий код...

home.html

function urlParam(name){
            var results = new RegExp('[\\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
            if(results)
                return results[1] || 0;
            else
                return '';
        }

        if(urlParam('view') == 'full'){ 
        }
        if(urlParam('view') == ''){
            // <![CDATA[
            var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
            if (mobile) { 
                    document.location = "http://www.mysite.com/mobile.html";  
            }  
            // ]]>
        }

и код mobile.html

<a href="http://www.mysite.com?view=full" data-ajax="false">Full Site</a>
person rjg132234    schedule 01.11.2012

Вы можете попробовать добавить rel="external" к ссылке <a>, ведущей на страницу вашего рабочего стола:

<ul data-role="listview" data-inset="true">
    <li>
        <a href="http://www.somdomain.com/?view=full" rel="external">Full Site</a>
    </li>
</ul>

Это отключит навигацию Ajax и обязательно обновит страницу, удалив данные, превратив вашу страницу рабочего стола в мобильную страницу.

Дайте мне знать, если это работает для вас.

person Littm    schedule 13.10.2012
comment
Я попробовал это, и когда вы нажимаете на эту ссылку, кажется, что она просто обновляет страницу и возвращает мобильный сайт. - person rjg132234; 13.10.2012
comment
Я также пытался поставить <a href="http://www.somdomain.com/?view=full" data-ajax="false">Full Site</a>, но он делает то же самое, перезагружает мобильную страницу. - person rjg132234; 13.10.2012
comment
Есть ли другой способ заставить AJAX не загружать новый сайт? - person rjg132234; 18.10.2012