分页：如何限制小屏幕设备上的页面数量

Posted 2023-03-06

【中文标题】分页：如何限制小屏幕设备上的页面数量

【英文标题】：Pagination: How to limit number of pages on small screen devices

【发布时间】：2017-10-09 11:15:52

【问题描述】：

我将有一些页面，我必须对它们应用分页。

在小型设备上（仅显示 2 个页码）：-

<<  <  1 | 2  >  >>

在中型及以上设备上（显示所有页码）：

<<  <  1 | 2 | 3 | 4  >  >>

我可以在中到大屏幕上显示所有页码，但要求是在小屏幕设备上一次只能显示 2 个页码。请建议如何处理这种响应式设计，如何隐藏其他数字并在小屏幕上一次仅显示 2 个？

https://jsfiddle.net/3rvm34a7/

【问题讨论】：

我希望我的 javascript 代码对你有用。如果是这样，请将我的答案标记为正确的解决方案。谢谢！

ux.stackexchange.com/questions/48400/…

【参考方案1】：

有两种方法可以实现：

1.服务端：

如果您使用 php 或 python 等，您可以从服务器检测 HTTP 用户代理。因此，您可以将分页 html 发送到视图。

2。客户端：

一） 您可以从 javascript 检测设备宽度或设备代理。然后，如果设备较小，则隐藏较大的分页，反之亦然。 链接：What is the best way to detect a mobile device in jQuery?

b) 使用 Css ： 您可以将课程应用于第 3,4 页的链接。使用媒体查询使用简单的 css 以较小的分辨率隐藏这些页面。但是，当我单击页面时，请确保您相应地更新页面类并动态更新分页 HTML。 链接：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

【参考方案2】：

这是一种用于在较小设备上隐藏页面的 CSS 解决方案 并为更大的设备展示它们JSfiddle。 将平板电脑/手机旋转为横向时，它还会显示和隐藏其他页面。 您可以调整小提琴窗口的大小以查看其工作原理。

【讨论】：

不适合动态网站

这只是CSS 解决方案。您将添加span 元素和css 类与php 或任何其他语言用于获取分页，if / else 根据当前页面

【参考方案3】：

我在这里更新了你的 jsfiddle： https://jsfiddle.net/3rvm34a7/1/

我在您的列表页码中添加了一个“pg”类名并添加了以下代码。

if(screen.width < 500)
  var list = document.getElementsByClassName("pg");
  for(var i = 2; i < list.length; i++)
     list[i].style.display = 'none';