5

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

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

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

4

1 回答 1

3

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

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

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

于 2013-03-19T09:40:30.477 回答