web-dev-qa-db-ja.com

サーバー側で画面幅を検出するためのベストプラクティスは何ですか？

デフォルトで1項目を出力するモジュールがあります。help.phpファイルには、次のようなものがあります。

$items = 1;
$db->setQuery($query, 0, $items)

次に、ユーザーの画面幅が特定の値よりも小さいかどうかを検出します。そうである場合は、1つのアイテムのみを取得し、それ以外の場合は4つのアイテムを取得します。それを行うためのベストプラクティスは何ですか？

$ itemsを4に設定し、javascriptを使用して他の3つのアイテムを削除することができますが、過剰なデータがダウンロードされるため、これは完全なソリューションではありません。私の質問は次のとおりです。1）PHPだけでクライアントの画面幅を検出できますか？）2）いいえ、javascript/ajaxを使用する必要がある場合、追加を考えています

<script>
    var w = screen.width;
    href = location.href;
    if (location.search){
       href = href + '&screenWidth=' + w;
    } else
    href = href + '?screenWidth=' + w;
</script>

すべてのページに移動し、$_GET['screenWidth] helper.phpファイルの画面幅の値を取得するには、これは良い方法ですか？これは出力バッファ（もしあれば）を台無しにするつもりですか？

phpbrowser-detectionmobile-detection
2
shenkwen

PHPはサーバー上で実行されるため、画面サイズを検出できません。このようなことにはajaxも使用しません。

Joomlaのブラウザー検出機能とJApplicationWebClientクラスを作成し、異なる画面サイズではなく、デバイスごとにphp /クエリを調整します。

サンプルコード：

$client = JFactory::getApplication()->client;
$client->browser;
$client->mobile...

最後のコメントについての考え：

また、人々が画面の幅ではなくデバイスの種類を検出する傾向がある理由がわかりません。ほとんどの場合（通常はレイアウトのみを行います）、遭遇しました。ユーザーがどのデバイスを使用しているかは気にしませんが、画面の幅だけを気にしています...

AJAXでそれを行うことは不可能ではありません。しかし、過剰なデータの保存に関する最初の懸念を検討してください...すべての画面のサイズ変更後のポイントは何ですか-サイズ変更が少し確立されるように遅延を与えても、データをダウンロードするための新しいリクエストがあります（たとえこれがバックグラウンドで発生した場合、およびキャッシュから取得した場合でも）。少なくとも同じ量のデータになるでしょう。それなら、クライアント側で最初からCSSを使用してみませんか？

もう1つは、画面サイズを変更した後（たとえば、ユーザーがモバイルデバイスを縦向きから横向きに切り替えた場合）、データベースに変更があった場合にデータを再読み込みすると、異なるアイテムが表示されることがあります。ユーザーは混乱する可能性があり、画面で以前に持っていたアイテムを検索する必要があります。

もちろん、新しいデータリクエストが発生するケースを指定してオプションを指定することもできますが、なぜこれが面倒なのでしょうか。

4
FFrewin

それが私だったら、実際には別の方法でこれに取り組みます。

私は常に4つのアイテムを取得します：

$items = 1;
$db->setQuery($query, 0, $items);
$rows = $db->loadObjectList();

すべて表示：

foreach ($rows as $row)
{
    echo '<div class="item_"' . $row->id . '>' . $row->item . '</div>';
}

どちらが出力されるか：

<div class="item_1">
    // row data
</div>
<div class="item_2">
    // row data
</div>
<div class="item_3">
    // row data
</div>
<div class="item_4">
    // row data
</div>

次に、CSS3メディアクエリを使用して3つを非表示にします：

@media (max-width: 767px) {
    .item_2, 
    .item_3,
    .item_4 {
        display: none;
    }
}

私がデータを表示した方法は、純粋に例と概念です。

私は常に画面幅を検出するためにクライアント側を使用することを好んでいます（それが行われるべき方法です）、そしてそれはより良いパフォーマンスでもあります。

お役に立てれば

1
Lodder

ベストプラクティス？ 最終的には無駄なので、画面サイズを決定しないのがベストプラクティスです。たとえば、大画面のユーザーがブラウザウィンドウのサイズを変更するとどうなりますか？

layoutをユーザーデバイスの画面サイズに関連して変更する場合は、レスポンシブWebデザインを使用してください。

デフォルトで配信するコンテンツアイテムの数がモバイルデバイスに適さないことが懸念される場合は、デフォルトを減らし、常に最初はモバイルを想定する必要があります。モバイルファースト開発は、特にこのような問題に対処します。

大画面のユーザーにさらに多くのコンテンツアイテムを提供する場合は、追加の「デスクトップサイズ」のアイテムを取り込む レスポンシブな条件付き読み込み テクニックを確認する必要があります。

1
Seth Warburton