2012-03-05 22 views
1

在开发具有响应式CSS设计的网站时,您的网站会根据客户的屏幕大小更改信息呈现方式。在很多情况下,屏幕尺寸越小意味着显示的信息越少。响应式设计的服务器端包含什么?

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

现在,让我们说你的CSS设计在响应和一些信息不显示给小屏幕设备。可以说,其中的一些信息是来自数据库查询未显示的信息。这意味着当移动设备加载此页面时,服务器端代码正在进行不必要的数据库调用,因为结果信息不会由于其屏幕大小而显示给最终用户。

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

+1

您可以使用javascript来检查窗口宽度,并要求用户转到像m.example.com这样的移动版本,或者只是重定向 – Ibu 2012-03-05 17:27:16

+1

如果您没有向小屏幕用户显示信息,那么您是做错事。他们可能不得不滚动或点击一个标签才能看到它,但信息应该在那里。 – Quentin 2012-03-05 17:44:25

+0

@Quentin然后,一百万个MAJOR网站做错了。看看亚马逊网站的手机优化版本,并将其与您在桌面上看到的内容进行比较... – 2012-03-05 18:42:07

回答

2

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

一般而言,我相信CSS媒体查询的目的是用来优化各种尺寸内容的显示,但忽略内容的“损失”。这可能意味着额外的查询/计算/内容被加载但隐藏。对此的好处是,如果您的用户在缩小的浏览器中操作,然后将其最大化,则会全面显示整个页面。但是,如果他们没有完整的内容,除非刷新页面,否则他们将无法充分利用它。

我认为你需要问自己 - 你的部分额外的构建和维护工作值得在后端保存一些查询吗?

+0

您的观点关于一个桌面用户缩放他的浏览器窗口,而不必刷新页面以获取所有内容是一个非常好的点... – 2012-03-05 18:48:37

+1

此外,我已考虑通过屏幕大小通过AJAX回到服务器,但问题是,当用户加载第一页时,服务器完成处理并发送所有内容。因此,即使您为屏幕尺寸设置了一个“$ _SERVER”变量,它在下一页被访问或第一次被刷新之前不会生效。 – 2012-05-24 16:53:40

1

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

Adaptation: why responsive design actually begins on the server

Pragmatic responsive design

Detector: Combining browser and feature detection in your web app

+1

只是我吗?还是这个演示文稿的男人/女孩让你死?几页后,我放弃了,有一个完整的幻灯片页面,只是一个字?并一遍又一遍地重复同样的事情,你会得到什么?无论如何,这是一个很好的答案:) – Val 2013-01-20 22:07:32

0

我发现你的问题早在我的响应式设计的探索,我觉得你有同样的担心我:如果我把所有这一切努力使前端适应用户所拥有的设备,我应该尽可能在提供适当的材料方面付出一些努力?

但是,我对“响应式设计”运动的理解(如果适合称之为?)是提供一个默认网页,通过重新设置显示方式,灵活地缩放到所有设备尺寸。

如果您的网络资源是在PC或笔记本电脑上呈现的全部胖版本中的一些交互或信息变得完全不切实际或不适当,那么现在是时候建立您的网站的移动版本,智能手机应用在这一点上,你可以做一些服务器端检测浏览器,并从www.example.com重定向到mobile.example.com。