Question

刚刚为移动网络应用程序（使用xhtml-basic / xhtml-basic11 dtd）获得了一些css，并试图想出一种可靠的方法来过滤移动浏览器。我看了一下http://detectmobilebrowser.com，但似乎是根据字符串匹配列表进行过滤。

这是我想做的事情：

1 - 在css中，将页面部分设置为从移动浏览器隐藏不显示

#hideMeFromMobiles{display:none;}

2 - 使用可靠的库调用脚本，该库几乎肯定会在移动浏览器中失败。脚本执行类似这样的操作（伪代码）

if browser.window.width >= 480px then {
    $(#hideMeFromMobiles).addStyle(display:block;)
    }

这个想法是让脚本在移动浏览器上非破坏性地失败并在桌面Web浏览器中成功运行。

我的问题是：

首先这会有用吗？有什么理由这是一个死胡同，我应该转向另一个解决方案吗？

其次，有人可以确认正确的jQuery语法吗？

感谢您的帮助，挖

Answer 1

首先，移动浏览器可以说谎宽度和比例或滚动。

其次，对于许多移动设备来说，jQuery是一个非常胖的库。它不会在所有这些上运行，并且会刷新其中一些缓存。 xui可能是更好的选择。 jQuery团队正在研究为移动设备制作更加模块化的库版本。

第三，你需要一些关于“#hideMeFromMobiles”说明符的引号。

第四，一些移动浏览器默认关闭JavaScript（我正在看你的黑莓浏览器）。您需要一些<noscript>标记。

ppk一直在测试移动浏览器的陷阱。你应该从他的mobile tests开始。

最后，一些移动浏览器非常棒，尤其是使用WebKit的智能手机上的新浏览器。我会在iPhone，Android，Storm和Pre上测试该网站，然后强行移动页面。

Answer 2

您应该能够通过链接一个只能由手持设备加载的特殊css来为移动设备指定一个特定的样式表，普通浏览器会忽略这一点：

<link href="/css/mobile.css" rel="stylesheet" type="text/css" media="handheld" />

在普通的CSS中有

#hideMeFromMobiles{}

并且在移动css中有

#hideMeFromMobiles{display:none;}

如果你在正常的CSS之后链接移动css，移动css设置将覆盖正常的css。

Answer 3

尝试http://www.iui-js.org/我认为对我来说更清洁。

Answer 4

如果您认真对待移动开发，则应考虑为移动设备制作单独的页面。

虽然#hideMeFromMobiles{display:none;}可以使用，但移动设备上仍会下载所有内容和图片，更不用说页面上运行的其他CSS和脚本了。这将大大增加访问者的带宽。最好为他们提供特定的移动页面。

至于检测，我认为http://detectmobilebrowser.com是最好的方法之一。无需重新发明轮子。正如其他答案中所提到的，屏幕宽度可以欺骗你。