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

【问题标题】：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/…

标签： javascript jquery angularjs css sass

【解决方案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';
  }
}

【讨论】：