Как отобразить диалоговое окно для мобильных пользователей только на немобильном сайте - PullRequest
Новая
       18

Как отобразить диалоговое окно для мобильных пользователей только на немобильном сайте

0 голосов
/ 26 января 2012

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

Я думал, что смогу использовать jquery mobile, но я не нахожу способ заставить работать должный диалог rel =. Если есть встроенный скрипт jquery, который распознает браузер и выдает диалоговое окно для мобильных пользователей с просьбой переключиться на мобильный URL или нет?

Ответы [ 2 ]

0 голосов
/ 26 января 2012

У меня есть решение, которое может решить вашу проблему.Он использует CSS и имеет MediaQuerie.В значительной степени, если ширина браузера меньше 350px, отображайте содержимое.Проверьте это - http://jsfiddle.net/Rw6MD/

0 голосов
/ 26 января 2012 
$(function () {
    if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i)) {
        $.mobile.changePage($('#my-dialog'), {
            role : 'dialog'
        });
    }
});

Вы можете программно вызвать диалог с помощью функции $.mobile.changePage(): http://jquerymobile.com/demos/1.0/docs/api/methods.html

Скорее всего, вы захотите обновить оператор if, который решит, является ли браузер мобильным браузером,код, который я разместил, является просто примером, который захватывает устройства Android и iPhone.

Вот некоторая документация для match(): https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/match

Если регулярное выражение включает флаг g, метод возвращает массив, содержащий все совпадения.Если совпадений не было, метод возвращает значение NULL.

null преобразуется в falsy, а при обнаружении любых совпадений - truthy.

Обновление

Хорошо, чтобы показать модальное диалоговое окно без jQuery Mobile, вы можете просто создать элемент DOM, который перекрывает остальную часть сайта: 

$(function () {
    if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i)) {
        $('body').append('<div style="position : absolute; z-index : 999; top : 0; left : 0; width : 100%; height : 100%; background : #000; opacity : 0.5; filter : alpha(opacity=50);" /><div style="position : absolute; z-index : 1000; top : 50%; left : 50%; width : 200px; height : 100px; margin-left : -100px; margin-right : -50px;">Your dialog text goes here</div>');
    }
});

Мне нравится показывать «Панель уведомлений»вверху страницы, которая рассказывает пользователю о мобильном сайте: 

$(function () {
    if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i)) {
        $('body').prepend('<div id="mobile-notice" style="position : relative; display : none;">copy goes here</div>').find('#mobile-notice').slideDown(500);
    }
});
...