根据屏幕大小防止下载不必要的内容答案

【问题标题】：Prevent downloading unnecessary content depending on screen size根据屏幕大小防止下载不必要的内容
【发布时间】：2013-03-07 21:44:01
【问题描述】：

我正在构建一个响应式网站，上面有一个新闻部分。根据访问者屏幕大小，此部分有 2、3 或 4 个新闻项目。目前，cms (modx) 总是提供 4 个新闻项目，如果用户应该有一个小的视口，我会使用媒体查询隐藏额外的新闻项目。

这似乎不是很有效（它会为小屏幕的人使用额外的带宽）。同样使用上述方法，我遇到了“较新帖子”、“较旧帖子”类型导航的问题（因为单击“旧帖子”总是会加载 4 个旧帖子，而有些人可能只需要 2 或 3 个）。

有没有更好、更可靠的方法来做到这一点？是否有可能使新闻项目的服务更具响应性？换句话说：如何根据屏幕大小防止下载不必要的内容？

【问题讨论】：

响应式设计相对于单独站点的一个缺点是即使内容被 css 隐藏也会被下载 - 解决这个问题的方法是基于屏幕使用 js 将某些项目注入 dom大小，但如果人们禁用了他们的 js，它可能会破坏您的网站
你可以看看使用服务器端组件：lukew.com/ff/entry.asp?1392
您需要在服务器端或通过延迟加载来解决它，也请您的设计人员访问此页面：managewp.com/5-reasons-why-responsive-design-is-not-worth-it

【解决方案1】：

一种方法是对您正在做的事情采取相反的路线：生成仅包含 1 个新闻项目的页面，然后在必要时填充更多（而不是生成 4 个然后隐藏它们）

您可以检测用户的视口是否允许使用 JS 显示更多故事，然后使用 ajax 获取它们（同时可能还有“加载更多..”动画）。

这样，移动用户的带宽不会用完，对于非 JS 用户，它也会降级为 1 个新闻报道（您还可以通过“点击查看更多”链接为非 JS 用户提供大视口)

【讨论】：

这是有道理的。我的媒体查询在 em 中，你知道 jquery 是否也可以检测 em 中的视口大小吗？因为那样的话，这将是一个很好的解决方案。
环顾四周，我发现这很困难，所以我想这只有在我在 px 中进行媒体查询时才有效。
正如@Ella Ryan 所提到的，渐进式增强将是保持响应式网站用户友好的绝佳且唯一的解决方案。使用 ajax 获取更多新闻相当简单，对于使用手持设备的人来说会有所不同