【发布时间】：2013-05-16 23:50:33
【问题描述】：
我的公司使用专有的 CMS 开发网站，我们适应移动开发的能力很差。我们开发特定于移动设备的网站，但我们不会免费赠送它们。无论如何，我们的大多数网站都使用带有无序列表的水平导航，当父项悬停在其中时，子菜单会出现。这在桌面设备上很好，但在移动浏览器上不起作用。子菜单出现了，但它们的功能就好像它们是透明的，对子项目的点击无处可去 - 或者更糟的是，转到子菜单后面的链接。
我能够编写一个简短的 jQuery 脚本（我是 jQuery 的初学者），如果单击父链接，它会强制子菜单保持可见。它可以工作，但在第一次单击时不起作用 - 在第一次单击时，浏览器会尝试启动移动悬停仿真（？）并在屏幕上瞬间闪烁子菜单。然后再次单击将打开子菜单，此时子菜单功能齐全，或者可以通过单击其他位置关闭。这显然不理想。
这是 jQuery 脚本。如果 a 元素有 .dropper 类，它将有一个 ul 作为它的下一个兄弟，这就是选择器的工作原理。
$(function() {
$('a.dropper').click(function(){
$(this).next().toggle();
});
});
希望有人知道一种方法，通过该方法我可以使用相同的 HTML 和 CSS 使这些菜单在桌面和移动浏览器上工作。不幸的是，媒体查询可能无法在我们的系统中实现。显然，我宁愿摆脱这种导航，并设计出更具响应性的设计，但这是另一天的另一个问题。
我一直在最近的 Android 设备上使用 Chrome 作为我的移动测试环境，但任何解决方案都应该可以在 iPhone 上运行。
【问题讨论】：
-
媒体查询可能不是正确的想法。更好的是在服务器端检测设备，然后返回针对移动设备量身定制的不同版本的内容。如果您有该选项，则首先从移动设备开始也更容易。媒体查询有点奇怪，因为移动浏览器会加载所有内容，从而使网站加载缓慢、加载成本高，因为它将加载桌面网站的所有内容（这会更大，但会为更小的屏幕格式化内容）。
-
另外，如果您想定位网站的 iOS 版本，请尝试使用 Pastry Kit：stackoverflow.com/questions/1143589/…
-
我最终使用代理嗅探器加载单独的样式表，其中包含无悬停移动导航样式。我想这个问题在理论上是无法回答的，但我愿意向任何关心写一个好的“这就是为什么你不能这样做”回复的人表示赞赏。
-
媒体查询更多地是关于调整网站大小以适应不同的设备或不同大小的浏览器窗口......而不是防止太多内容被加载到设备......这就是用户代理检测是为了。