在移动视图上更改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>

我想要同时渲染＆＃34; container1＆＃34;使用移动视图时。有可能吗？

Answer 1

您可以检测自己的网站是否在移动设备中，this answer可以为您提供帮助。 然后，使用Javascript，您必须更改元素父级，如此example。

希望这可以帮到你。

Answer 2

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