服务器端响应式网页设计

Server-side Responsive Web Design

本文关键字：网页设计 响应 服务器端      更新时间：2023-09-26

我最近一直在研究响应式网页设计。虽然有许多技术和实践都属于"响应式网页设计"的范畴，但实际上，RWD的主要支柱似乎是CSS3 media查询。因此，RWD基本上是一个客户端策略。

但是对于低分辨率布局，您通常必须简单地删除 HTML的整个部分。例如，在较低分辨率下，3列布局可能需要变成1列或2列布局，这意味着您在较低分辨率下基本上隐藏了整个DIV。我在这里看到的问题是，您仍然需要实际发送相同数量的HTML代码到低分辨率设备，即使它永远不会显示。换句话说，你将同样的3列HTML发送到高分辨率屏幕和低分辨率手机，但每次发送到低分辨率手机时，这真的是完全浪费带宽。

问题:我在这里的理解是正确的，还是RWD也包含了服务器端技术?

例如，假设您有一个框架HTML页面，如: 
<div id = "main-content">
  <!-- content goes here -->
</div>

和onload(或onresize)，客户端浏览器检测屏幕分辨率并发出一个AJAX请求，用该分辨率的适当HTML填充main-content。

像这样利用服务器端策略实现RWD的技术在实践中使用过吗?

一般来说，响应式开发——如果做得正确的话——不应该在标记中有任何冗余或重复的数据。同样，以一种屏幕宽度显示的内容也会以另一种宽度显示，只是方式不同。

我喜欢在页面加载时基于屏幕尺寸进行AJAX调用的想法，但这不是响应式设计的真正想法，并且实际上会花费更长的时间来加载页面(对于访问者)。这也意味着当浏览器窗口尺寸改变时，页面布局将无法适应(例如:在平板电脑上切换方向)。除非您在此时提出一个新的AJAX调用，否则您将发送比单个响应式页面加载更多的流量，并且也会给服务器带来更多的负载。

你基本上回答了你的问题…

当窗口调整大小时，你需要进行ajax调用的时间要长得多，而不是只给整个html页面一次，而使用css。

响应式设计的主要思想不是隐藏你的内容。当你隐藏你的内容时，你会遇到很多麻烦，比如搜索引擎会显示你的内容，但当一个人在他的平板电脑上访问你的网站时，内容不会显示出来。

编辑:

需要说明的是，当我说到内容时，我指的是你页面上重要的东西，比如"adsense"或其他对访问者来说无关紧要的东西，应该完全隐藏起来。

关于服务器端技术有很多，一个很好的例子是Adaptive Images，它将低分辨率的图像发送到较低的设备，但你也可以用客户端技术做到这一点。

Edit2:

我差点忘了

更不用说onresize会在每次更改维度时触发一次。换句话说，如果从1000x1000增加到950x1000，它将触发50次- 50次AJAX调用。@Sebastien Renauld

为什么要在移动设备上隐藏额外的列?删除信息从来都不是一个好主意，那只会让访问者不喜欢你网站的移动版本。

网站上的列通常是用浮动的html元素创建的。用媒体查询删除上述浮动，瞧!现在所有信息都在一列中。

如果那一列最终太高了，你可能想要考虑添加显示/隐藏信息的开关，但这是我在移动网站删除内容时所能做到的。

http://css-tricks.com/make-client-side-data-available-server-side/

在这篇文章中，Chris Coyier谈到了使用客户端方法来检查屏幕的当前宽度，然后将其保存到一个cookie中以供服务器端使用，然后刷新页面。我不完全赞成这种方法，但也许它对你会有用。

您可能想要查看JavaScript特性检测甚至UA嗅探，尽管这是不受欢迎的。

您不必在较低分辨率下删除/隐藏列。诀窍是在低分辨率下将它们堆叠在一起，然后在高分辨率下将它们排成一列。

<div class="one">Column One</div>
<div class="two">Column Two</div>
<div class="three">Column Three</div>
.one, .two, .three {
blah blah blah, whatever needs to be here.
}

然后添加CSS:

@media only screen and (min-width: 600px) {
float: left; /* screens larger than 600px wide will throw them into columns via float*/
}
相关文章：