it-swarm-eu.dev

Qual è la migliore pratica per rilevare la larghezza dello schermo sul lato server?

Ho un modulo che genera 1 oggetto di default, nel suo file help.php, c'è qualcosa di simile

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

Ora voglio rilevare se la larghezza dello schermo degli utenti è inferiore a un determinato valore, in caso affermativo, quindi ottenere solo 1 elemento, altrimenti ottenere 4 elementi. Qual è la migliore pratica per farlo?

Posso semplicemente impostare $ items su 4 e usare javascript per eliminare gli altri 3 articoli, ma questa non è una soluzione perfetta perché verranno scaricati dati eccessivi. Le mie domande sono: 1) can PHP rileva solo la larghezza dello schermo del client? 2) Se no e devo usare javascript/ajax, sto pensando di aggiungere

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

su ogni pagina e usa $_GET['screenWidth] per ottenere il valore della larghezza dello schermo nel file helper.php, è una buona pratica? Questo si rovinerà con il buffer di output (se ce ne sono)?

2
shenkwen

PHP non è in grado di rilevare le dimensioni dello schermo, poiché viene eseguito sul server. Non userei anche Ajax per qualcosa del genere.

Usa Funzionalità di rilevamento del browser Joomla con JApplicationWebClient classe e regola il tuo php/query per dispositivi diversi, non particolari per dimensioni dello schermo diverse.

Codice di esempio:

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

Alcuni pensieri sul tuo ultimo commento:

E non capisco perché le persone tendano a rilevare il tipo di dispositivo anziché la larghezza dello schermo. Nella maggior parte dei casi (di solito faccio solo layout) che incontro, non mi interessa quale dispositivo utilizzino gli utenti, ma solo la larghezza dello schermo ....

Non è impossibile farlo con AJAX. Ma considerando la tua preoccupazione iniziale sul salvataggio di dati eccessivi ... quale sarebbe il punto se dopo ogni ridimensionamento dello schermo - anche se gli dai un ritardo, quindi il ridimensionamento è un po 'più stabilito, avresti una nuova richiesta per scaricare i dati (anche se questo accade in background e e anche se li ottieni dalla cache). Finiresti almeno con la stessa quantità di dati. Allora perché non farlo dall'inizio sul lato client con CSS?

Un'altra cosa è che dopo una modifica delle dimensioni dello schermo (supponiamo che l'utente cambi il suo dispositivo mobile da verticale a orizzontale), ricaricare i dati può portare a elementi diversi, se si verifica una modifica nel database. L'utente potrebbe essere confuso e dovrebbe cercare l'elemento che aveva precedentemente nella sua schermata.

Naturalmente, potrebbe esserci la possibilità di seguire la strada e specificare i casi in cui dovrebbe verificarsi una nuova richiesta di dati ... Ma perché tutto questo fastidio?

4
FFrewin

Se fossi in me, mi approccerei in modo diverso.

Avrei sempre 4 elementi:

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

Visualizzali tutti:

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

Che produrrebbe:

<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>

Quindi utilizzare le query multimediali CSS3 per nasconderne 3:

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

Il modo in cui ho visualizzato i dati è puramente un esempio e un concetto.

Ho sempre preferito utilizzare il lato client per rilevare le larghezze dello schermo (come dovrebbe essere fatto), ed è anche una prestazione migliore.

Spero che sia di aiuto

1
Lodder

La migliore pratica? La migliore pratica è di non tentare di determinare la dimensione dello schermo , perché alla fine è inutile. Cosa succederà, ad esempio, quando un utente di un grande schermo cambia la dimensione della finestra del browser?

Se si desidera modificare un layout , in relazione alle dimensioni dello schermo su un dispositivo degli utenti, farlo con un web design reattivo.

Se temi che il numero di elementi di contenuto forniti per impostazione predefinita non sia adatto ai dispositivi mobili, devi ridurre le impostazioni predefinite e assumere sempre i dispositivi mobili in primo luogo; lo sviluppo mobile-first affronta in modo specifico problemi come questo.

Se si desidera quindi fornire agli utenti di schermi di grandi dimensioni più elementi di contenuto, è necessario esaminare le tecniche caricamento condizionato reattivo per estrarre gli elementi "dimensione desktop" aggiuntivi.

1
Seth Warburton