Question

我知道检测移动浏览器的各种方法，但我找不到为移动用户弹出对话框的方法，允许他们确认他们想要查看常规页面（而不是切换到移动网站）即使他们在网站的非移动版本。不幸的是，这是我的要求，而不是简单的重定向。

我以为我可以使用jquery mobile，但我找不到一种方法来使正确的rel =对话框工作。如果有一个预构建的jquery脚本可以进行浏览器检测，并为移动用户弹出一个对话框，要求他们切换到移动网址？

Answer 1

$(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);
    }
});

Answer 2

我有一个可能解决您问题的解决方案。它使用css并具有MediaQuerie。几乎如果浏览器宽度小于350px，则显示内容。检查一下 - http://jsfiddle.net/Rw6MD/

如何仅在非移动网站上为移动用户显示对话框

2 个答案:

更新