我知道检测移动浏览器的各种方法，但我很难找到一种方法来为移动用户弹出一个对话框，让他们确认他们想要查看常规页面（而不是切换到移动网站），即使他们在网站的非移动版本上。不幸的是，这是我的要求，而不是简单的重定向。
我原以为我可以使用 jquery mobile，但我没有找到一种方法来使正确的 rel=dialog 工作正常。如果有一个预先构建的 jquery 脚本，浏览器会检测并弹出一个对话框让移动用户要求他们切换到移动 url？
【问题讨论】：
标签： jquery mobile jquery-mobile dialog
我有一个解决方案可以解决您的问题。它使用 css 并有一个 MediaQuerie。如果浏览器宽度小于 350px 则显示内容。检查一下 - http://jsfiddle.net/Rw6MD/
【讨论】：
@media all and (max-height: 320px) or (max-width: 320px)。这不起作用，你知道如何在媒体查询中使用or 语句吗？
width，如果我将高度重新调整为小，.mobile 元素不会显示。
$(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);
}
});
【讨论】：