jqueryを使用してデバイスの幅を確認し、結果をPHPに戻す

Question

ページを読み込むときに最初に表示されるイメージの数を制限する必要があります。この機能はモバイルビューでのみ使用できます。

これを行うには、jQueryを使用してデバイスの幅を確認し、その結果をphpファイルに戻す必要があります。

ループ内でifステートメントを使用すると、一度に表示されるアイテムの数を制限できます。ユーザーがすべての画像を見る必要がある場合は、リンクを下部に追加して、画像を通常どおりに読み込むことができます。

どうすればいいですか？

基本的に私が今持っているアイデアは、私は（真/偽isMobileをチェックするブール値のように）PHPで変数を持っている、です。 jQueryコードの出力から値（true/false）を割り当てることができます。ここからjqueryにデータを送信する必要があります。

私はjQueryを使用して、デバイスの幅を確認し、条件を記述し、その後、私のPHPファイルに結果を送信します。

どうすればこの問題を解決できますか？

jQueryでデバイスの幅を確認して、値をphpに取得するにはどうすればよいですか？ここで

Answer 1

は、それが（640ピクセル幅最大にウィンドウのサイズを小さくしようとする）ように見えるかもしれ方法の例です。ご覧のとおり、デバイスを検出したり、サーバー側のコードを使用して目標を達成する必要はありません。

$('.show-all-button').on('click', function() { 
 
    $('.images-list').toggleClass('show-all'); 
 
});

.images-list .image { 
 
    display: block; 
 
    margin: 5px; 
 
} 
 

 
.show-all-button { 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
    display: none; 
 
} 
 

 
@media (max-width: 640px) { 
 
    .show-all-button { 
 
    display: block; 
 
    } 
 
    .images-list:not(.show-all) .image { 
 
    display: none; 
 
    } 
 
    .images-list:not(.show-all) .image:nth-child(1), 
 
    .images-list:not(.show-all) .image:nth-child(2), 
 
    .images-list:not(.show-all) .image:nth-child(3), 
 
    .images-list:not(.show-all) .image:nth-child(4) 
 
    { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="images-list"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=1"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=2"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=3"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=4"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=5"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=6"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=7"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=8"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=9"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=10"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=11"> 
 
    <img class="image" src="https://dummyimage.com/200x100/000/fff.png&text=12"> 
 
</div> 
 
<button class="show-all-button">Show all images</button>