ページがいくつかあり、ページネーションを適用する必要があります。ページネーション：小さな画面デバイスのページ数を制限する方法
は、小さなデバイス上で（のみ2ページ番号を表示する）： -
媒体および上記のデバイス上<< < 1 | 2 > >>
（すべてのページ番号を表示する）：
<< < 1 | 2 | 3 | 4 > >>
私がすることができますよ中規模から大規模の画面ではすべてのページ番号を表示しますが、小さな画面デバイスでは一度に2つのページ番号しか表示されません。このレスポンシブルデザインをどのように扱うか、他の数字を隠す方法、小さな画面で一度に2つしか表示しない方法を教えてください。
https://jsfiddle.net/3rvm34a7/
これを実装するには2通りの方法があります。
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を動的に更新してください。 リンク：https://www.w3schools.com/css/css_rwd_mediaqueries.asp
私はここにあなたの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';
}
}
これは、小型デバイス 上のページを隠し、大きなデバイスJSfiddleのためにそれらを示すためのCSSソリューションです。
タブレット/携帯電話を横向きに回転させると、他のページを表示したり非表示にしたりします。
フィダーウィンドウのサイズを変更すると、フィダーウィンドウの動作を確認できます。
私のjavascriptコードがうまくいったら幸いです。もしそうなら、答えを正しい解決策としてマークしてください。ありがとう！ –