javascript - 处理 HTML 中的移动元素的更好方法是什么？

Question

我需要制作一些大型网站的移动版本，元素顺序和内容有很大不同。因此，我可以将元素添加到 HTML 中并设置显示:无，在桌面上，具有针对移动设备的特定样式，或者我可以在 JS 中添加新元素，如果我创建新元素，我可以轻松制作非常轻的移动版本并为桌面添加元素，但如果我为移动和桌面版本制作大型 HTML，它可能也不太好。那么正确的做法是什么？

编辑:布局有很大差异，所以我需要在html或JS中添加许多元素，我正在询问更好的方法。我知道如何处理，但更好的方法是什么？为什么？可能还有其他方法可以处理这种情况，如果您知道请告诉我。

附注 我知道这个问题之前必须有答案，但这类问题很难找到答案。

Answer 1

如果布局差异不是很大，那么您可以使用移动友好(响应式)框架。但正如您所说的“内容非常不同”，这意味着您必须根据 View 的复杂性完全使用不同的 DOM 或仅使用不同的 CSS。

此外，正如您所说，您可以拥有两个具有共同内容的并行 View ，这些 View 根据媒体查询显示或隐藏。但随后您还必须处理多个事件、冗余代码以及移动设备不同分辨率的问题。所以选择权在你。

更新:- 因此，如果移动和桌面 View 的差异太大，那么它本质上就需要两个不同的 View (页面)。我会首先加载一个空白登陆页面，然后检测浏览器是否是移动浏览器，然后使用 JavaScript 进行重定向。如果你使用 jQuery，类似 ..

$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
        //Conditional script here
    }
 });

同时还为用户提供了更改 View 的选项(如果他们认为如此)。

此外，我还可以通过使用 ajax 将相应的 View 加载到 DOM 中而不是重定向来进一步即兴发挥，我已经在当前的应用程序中实现了这一点，并且可以说最终用户很高兴:)

最后，不存在适用于所有情况的“正确方法”，您必须权衡您的选择并做出决定。