响应式设计的服务器端涉及什么？

Question

在开发具有响应式CSS设计的网站时，您的网站会根据客户端的屏幕大小更改信息的呈现方式。在许多情况下，较小的屏幕尺寸意味着显示的信息较少。

假设您有一个专为桌面设计的网站。在服务器端代码中，您可以进行多个数据库查询，然后在页面上以某种形式显示该信息。

现在，假设您的CSS设计具有响应性，并且某些信息不会显示在具有小屏幕的设备上。可以说，未显示的部分信息来自数据库查询。这意味着当移动设备加载此页面时，服务器端代码正在进行不必要的数据库调用，因为结果信息不会因为屏幕大小而显示给最终用户。

响应式设计通常使用CSS媒体查询来确定基于设备屏幕大小显示的信息。为响应式设计编写有效且高效的服务器端代码的好方法是什么？

Answer 1

您是否考虑过使用AJAX将有关屏幕大小的传递数据传递回服务器端php？然后根据相应的CSS设计运行查询。如果您的移动设备不支持JavaScript或禁用它的浏览器，则会出现问题。您还需要额外的维护 - 如果您更改或更少地显示CSS，则必须更新脚本以保持同步。

一般来说，我认为CSS媒体查询旨在用于优化各种尺寸内容的显示，但忽略内容的“损失”。这可能意味着加载了额外的查询/计算/内容但隐藏了。这样做的好处是，如果您的用户在缩小的浏览器中运行，然后将其最大化，则可以全新显示整页。但是，如果他们没有完整的内容，除非他们刷新页面，否则他们无法充分利用它。

我认为您需要问问自己 - 您需要额外的构建和维护工作，以便在后端保存一些查询吗？

Answer 2

@jakobud您可能需要查看以下文章和演示文稿，讨论在移动和/或响应式设计环境中结合客户端和服务器端功能检测的方法。

Adaptation: why responsive design actually begins on the server

Pragmatic responsive design

Detector: Combining browser and feature detection in your web app

Answer 3

我在探索响应式设计时就提到了你的问题，因为我认为你有同样的担忧：如果我把所有这些努力都用在使前端适应用户所拥有的设备上，我应该首先要投入适当的材料来投入相同的资源吗？

但是，我对响应式设计运动的理解（如果适合称之为？）是提供一个默认网页，通过重新排列显示的方式，可以灵活地扩展到所有设备尺寸。

如果您的网络资源是在PC或笔记本电脑上以全脂版本呈现的某些交互或信息变得完全不切实际或不合适，那么可能是时候构建您网站的移动版本或原生智能手机了应用程序。此时，您可以执行服务器端检测浏览器并从www.example.com重定向到mobile.example.com。