我的公司使用专有CMS开发网站，我们适应移动开发的能力非常糟糕。我们开发特定于移动设备的网站，但我们不会免费提供这些网站。无论如何，我们的大多数站点都使用带有无序列表的水平导航，其中子项菜单在父项目悬停时出现。哪个在桌面设备上很好，但在移动浏览器上不起作用。显示子菜单，但它们的功能就好像它们是透明的，点击子项目无处可去 - 或者更糟糕的是，转到子菜单后面的链接。
我能够编写一个简短的jQuery脚本（我是jQuery的初学者），如果点击了父链接，它会强制子菜单保持可见。它可以工作，但不是第一次点击 - 第一次点击，浏览器尝试启动移动悬停模拟（？）并立即在屏幕上闪烁子菜单。然后第二次单击将打开子菜单，此时子菜单功能完全正常，或者可以通过单击其他位置关闭。这显然不太理想。
这是jQuery脚本。如果a元素具有.dropper类，则它将具有ul作为其下一个兄弟，因此这是选择器的工作方式。
$(function() {
$('a.dropper').click(function(){
$(this).next().toggle();
});
});
希望有人知道一种方法，通过该方法，我可以使用相同的HTML和CSS将这些菜单用于桌面和移动浏览器。不幸的是，媒体查询可能无法在我们的系统中实现。显然，我宁愿远离这种导航，并且设计得更响应，但这是另一天的另一个问题。
我在最近的Android设备上使用Chrome作为我的移动测试环境，但任何解决方案都应该适用于iPhone。
答案 0 :(得分：1)
媒体查询可能不是正确的想法。最好的方法是在服务器端检测设备，然后返回为移动设备定制的不同版本的内容。如果你有这个选择，首先开始使用移动设备也会更容易。媒体查询有点奇怪，因为移动浏览器会加载所有内容，从而构建一个负载缓慢，价格昂贵的网站，因为它将加载桌面网站所需的所有内容（会更大，但为较小的屏幕格式化该内容。
媒体查询更多的是将网站的大小调整为不同的设备或不同大小的浏览器窗口......而不是防止过多的内容被加载到设备......这就是用户代理检测的目的。