Question

我需要制作一些大型网站的移动版本，元素的订单和内容是非常不同的。所以我可以在HTML中添加元素并在桌面上设置display：none，具有移动设备的特定样式，或者我可以在JS中添加新元素，如果我创建新元素我可以轻松制作非常轻便的移动版本并添加桌面元素，但如果我为移动和桌面版本制作大型HTML，它可能也不会很好。那么这样做的正确方法是什么。

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

P.S。我知道这个问题必须先回答，但很难找到这类问题的答案。

Answer 1

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

此外，正如您所说，您可以拥有两个基于媒体查询显示或隐藏的共同内容的并行视图。但是，你必须处理多个事件，冗余代码和移动设备的不同分辨率的问题。所以选择权归你所有。

更新： - 因此，如果移动和桌面视图中的差异太大，那么它本身就会出现两个不同的视图（页面）。我首先加载一个空白登陆页面，然后检测浏览器是否移动，然后使用javascript重定向。如果你正在使用jQuery，比如..

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

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

同时也为用户提供了更改视图的选项，如果他们这么认为的话。

此外，我还可以通过使用ajax将相应的视图加载到DOM而不是重定向来进一步改进，我已经在我当前的应用程序中实现了这一点，并且让最终用户感到高兴：）

最后，没有适用于所有场景的“正确方法”，你必须权衡你的选择并做出决定。

Answer 2

如果移动和桌面有微小的更改，您可以使用display none。您可以使用像Bootstrap这样的CSS框架。

Answer 3

你可以简单地使用bootstrap用于移动友好网站，因为它将更容易处理大多数html元素或者不同的方法是使用可以根据需要隐藏在桌面或移动设备中的元素。使用媒体查询来处理它

Answer 4

要使响应式CSS使用@media代表媒体查询，根据您的要求，您需要在移动设备中使用新元素，然后隐藏元素并向移动设备显示仅使用enquire.js

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

4 个答案: