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

【问题标题】：What does the server-side of Responsive Design involve?响应式设计的服务器端涉及什么？
【发布时间】：2012-03-23 04:27:30
【问题描述】：

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

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

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

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

【问题讨论】：

您可以使用 javascript 检查窗口宽度，并要求用户转到 m.example.com 之类的移动版本，或者只是重定向
如果您没有向小屏幕用户显示信息，那么您做错了。他们可能需要滚动或点击标签才能看到它，但信息应该在那里。
@Quentin 那么一百万个主要网站都做错了。去看看亚马逊网站的移动优化版本，并将其与您在桌面上看到的内容进行比较......
@Ibu 我认为您误解了这个问题。去阅读一些关于响应式设计的内容。其目的是为所有设备维护一个代码库、一个 url，并且您的网站设计符合客户端的浏览器大小。
@Jakobud，不，我已经理解了这个问题，但是服务器不知道您的屏幕大小。您可以阅读用户代理并假设，但是，我不相信它是最佳选择，因为用户代理不一致并且可以被操纵。重定向或建议移动版本会容易得多。这样您就不必计算桌面版本中存在的所有数据。响应式不直接影响php和mysql

标签： php mysql responsive-design

【解决方案1】：

我在探索响应式设计的早期就发现了您的问题，因为我认为您和我有同样的担忧：如果我将所有这些努力都用于使前端适应用户拥有的设备，我应该是否首先会付出同样多的努力来提供适当的材料？

但是，我对响应式设计运动的理解（如果这样称呼它是否合适？）是提供一个默认网页，通过重新排列其显示方式，可合理地缩放到所有设备尺寸。

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

【讨论】：

【解决方案2】：

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

Adaptation: why responsive design actually begins on the server

Pragmatic responsive design

Detector: Combining browser and feature detection in your web app

【讨论】：

只有我一个人吗？还是这个演示文稿的男孩/女孩让你厌烦至死？几页后我放弃了，有一整页幻灯片，就一个字？一遍又一遍地重复同样的事情，你会明白吗？尽管如此，这是一个很好的答案:)

【解决方案3】：

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

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

我认为您需要问自己 - 您额外的构建和维护工作是否值得在后端保存一些查询？

【讨论】：

您关于桌面用户放大浏览器窗口而无需刷新页面以获取所有内容的观点是一个非常好的观点......
另外，我考虑过通过 AJAX 将屏幕尺寸传回服务器，但问题是，当用户加载第一页时，服务器已完成处理并发送所有内容。因此，即使您为屏幕尺寸设置了 $_SERVER 变量，它也不会在访问下一页或刷新第一个页面之前生效。