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

Question

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

我

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

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将解析为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/