使用引导程序（js，html）动态提供移动和桌面网站服务

Question

我最初设计的是整个网站（单页）响应式的，仅使用CSS和引导4中的一些内联类进行重新适应。

现在，我发现自己需要重新设计整个台式机版本（或者说，其结构与当前在移动设备上的外观非常不同）。

因此，我想保留自己拥有的html并继续将其用于移动设备，并修改其副本并将其用于桌面。

我认为最简单的方法是像现在一样保留一个index.html文件，复制整个index.html内部部分（在div与class =“ page”之间，基本上在正文之后出现）并设置一个其中的class="page d-none d-lg-block"和另外一个class="page d-block d-lg-none"都使用bs4类根据屏幕尺寸显示/隐藏内容。

我在js文件中有很多内联js函数以及其他引用id的函数，所以我的感觉是会产生错误，因为js两次看到相同的id或页面加载时出现了一些东西（由于显示了bs4内联类）内容），但只是要确保有人知道这是否正确（也是SEO明智的做法）？还是会和javascript搞混呢？

Answer 1

使现有页面具有响应能力不是一件容易的事，但它比使用变通办法隐藏小页面和隐藏大断点要有价值得多。

原因是因为：

• 您将拥有多余的组件，这意味着您的应用程序响应后，其大小将增加一倍，
• 并且如果您使用静态内容而不使用数据库，则需要将内容维护在两个位置（大小断点）。

花更多的时间学习grid layout，并以正确的方式实施它。将来您将更容易维护您的Web应用。