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

Question

我会有一些网页，我必须应用分页对他们。

小型设备上的(仅显示2个页码)：-

<<  <  1 | 2  >  >>

介质及以上设备上的(显示所有页码)：

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

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

https://jsfiddle.net/3rvm34a7/

Answer 1

实现这一目标的方法有两种：

1.服务端:

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

2.客户端:

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

( b)使用css :您可以应用类链接页面3、4。使用媒体查询将这些页面隐藏在较小的分辨率上，使用简单的Css。但是，当我单击一个页面时，请确保您能够自动地更新页面类，并动态更新分页HTML。链接：mediaqueries.asp

Answer 2

这是一种CSS解决方案，用于将页面隐藏在较小的设备上，并将它们显示给大型设备JSfiddle。

它还将显示和隐藏其他页面时，旋转平板电脑/手机景观。

你可以调整小提琴窗口的大小，看看它是如何工作的。

Answer 3

I更新了你的小提琴： 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';
  }
}