Css 具有媒体查询或服务器端设备检测的复杂标记，用于响应性设计？

我们正在开发一个快速响应的网站。我们一直在为某些页面开发模型，这使得桌面和移动版本不可能重复使用完全相同的标记

问题是（从软件工程师的角度来看）：

是否最好（A）为桌面版和移动版的相同部分（即联系表单）的标记创建双版本，并利用媒体查询偶尔显示/隐藏标记

或者（B）使用服务器端设备/屏幕分辨率检测并在浏览器中解析适当版本的标记更好吗

在（A）中，我们最终将更复杂的标记返回到浏览器，有时会隐藏大部分标记（显示：无），并对页面的某些部分重复标记。对于需要尽可能简单简洁的标记的移动设备来说，这并不好。尽管如此，选项（A）听起来像是响应性设计理论上更正确的方法

在（B）中，我们将更简单、更清晰的标记返回到浏览器，因为在服务器端，我们决定返回标记的哪些部分。另一方面，例如，当调整桌面浏览器窗口的大小时（因为标记将来自服务器，并且在调整窗口大小时无法更改），我们将失去页面完全响应的灵活性

没有重新设计页面的选项，无法使用具有不同位置/大小的相同元素

没有使用该站点的移动版本（不同域）的选项

---

谢谢。

我建议使用服务器端检测，因为您不希望移动客户端加载大量不必要的标记。此外，响应式设计背后的理念是，它跨设备重用相同的代码，但听起来您使用的是两种不同的设计，这将阻止您采用涉及媒体查询的方法

---

祝你好运

恕我直言，我不同意亚历克的观点。显示：无广告-如果对标记的加载时间没有影响，则重量很小。如果设计正确，您将不会有任何问题。在我们公司，我们发布了30到40个应用程序，所有应用程序都响应速度快，而且对移动设备都很友好。我们使用方法A

虽然同情旧版本的移动浏览能力是一个好主意，但你必须考虑哪一个会超过另一个版本。手机更新相当频繁，而网站的更新时间将延长3到4倍

未来的代码。我们，工程师，负责创造未来将要实施的技术

---

我的2美分用于服务器端检测；）我们最终将采用服务器端方法。减少浏览器中不必要的标记。虽然感觉它更像是一个独立的移动版本，而不是一个响应性很强的版本。我100%同意。作为金融公司大型web应用程序的架构师，这一切都开始积累起来。如果display为non，并且如果您有任何形式的MVC数据绑定（角度、主干等），则仍会遍历DOM，这会增加大量开销。