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

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

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

<<  <  1 | 2  >  >>

>

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

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

>

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

---

有两种方法可以实现这一点：

1。服务方：

如果您使用的是php或python等，则可以从服务器检测HTTP用户代理。相应地，您可以向视图发送分页html

2。客户端：

（a） 您可以从javascript检测设备宽度或设备代理。如果设备较小，则隐藏较大的分页，反之亦然。 链接：

b） 使用Css： 您可以将类应用于第3、4页的链接。使用媒体查询可以使用简单的css以较小的分辨率隐藏这些页面。但是，当我单击一个页面时，请确保您根据需要更新页面类，并动态更新分页HTML。

---

链接：

我在这里更新了你的JSFIDLE:

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

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

if（屏幕宽度<500）{
var list=document.getElementsByClassName（“pg”）；
对于（变量i=2；i

这是一个CSS解决方案，用于在较小的设备上隐藏页面 并为更大的设备显示它们。
将平板电脑/手机旋转到横向时，它还将显示和隐藏其他页面。

---

您可以调整fiddle窗口的大小，看看它是如何工作的。

我希望我的javascript代码能为您工作。如果是，请将我的答案标记为正确答案。谢谢不适合动态网站这只是

CSS

解决方案。您将添加

span

元素和

css

类，并使用php或任何其他语言根据当前页面使用

if/else

进行分页