在移动视图上更改HTML文档的结构

Question

从桌面视图移动到移动视图时是否可以调整HTML结构？例如，

<div class="container1">
    <div class="dropdown1">Some HTML here</div>
</div>
<div class="container2">
    <div class="dropdown2">Some HTML here</div>
</div>

我想在使用Mobile视图时渲染“container1”中的下拉列表。可能吗？

Answer 1

您可以检测您的网站是否在移动设备中，this answer可以为您提供帮助。然后，使用Javascript，您必须更改元素父级，就像在这个example中一样。

希望这可以帮到你。

Answer 2

解决您问题的唯一方法是复制container1中的dropdown2并使用桌面视口上的媒体查询隐藏它。然后只在较小的设备上显示它并隐藏容器2。