ti-enxame.com

Qual é a melhor prática para detectar a largura da tela no lado do servidor?

Eu tenho um módulo que gera 1 item por padrão, em seu arquivo help.php, existe algo como

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

Agora, quero detectar se a largura da tela dos usuários é menor que um determinado valor; se sim, obtenha apenas 1 item e mais 4 itens. Qual é a melhor prática para fazer isso?

Posso apenas definir $ items como 4 e usar o javascript para eliminar os outros 3 itens, mas essa não é uma solução perfeita, pois os dados em excesso serão baixados. Minhas perguntas são: 1) pode PHP sozinho detectar a largura da tela do cliente? 2) Se não e eu tenho que usar javascript/ajax, estou pensando em adicionar

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

para todas as páginas e use $_GET['screenWidth] para obter o valor da largura da tela no arquivo helper.php, essa é uma boa prática? Isso vai atrapalhar o buffer de saída (se houver algum)?

2
shenkwen

O PHP não pode detectar o tamanho da tela, pois é executado no servidor. Eu também não usaria o ajax para algo assim.

Use Recursos de detecção de navegador do Joomla com o JApplicationWebClient classe e ajuste suas php/consultas para diferentes dispositivos, não específicos para diferentes tamanhos de tela.

Código de amostra:

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

Algumas reflexões sobre seu último comentário:

E não entendo por que as pessoas tendem a detectar o tipo de dispositivo em vez da largura da tela. Na maioria dos casos (geralmente faço apenas o layout), encontro, não me importo com o que os usuários do dispositivo estão usando, mas apenas com a largura da tela ....

Não é que não seja possível fazê-lo com o AJAX. Mas, considerando sua preocupação inicial em salvar dados excessivos ... qual seria o objetivo se depois de cada redimensionamento de tela - mesmo se você atrasar para que o redimensionamento seja um pouco mais estabelecido, você terá uma nova solicitação para baixar dados (mesmo se isso acontecer em segundo plano e mesmo que você os obtenha do cache). Você acabaria pelo menos com a mesma quantidade de dados. Então, por que não fazê-lo desde o início no lado do cliente com CSS?

Outra coisa é que, após uma alteração no tamanho da tela (digamos que o usuário alterne seu dispositivo móvel de retrato para paisagem), recarregar os dados pode trazer itens diferentes, se houver uma alteração no banco de dados. O usuário pode ficar confuso e precisaria procurar o item que tinha anteriormente em sua tela.

Obviamente, poderia haver a opção de seguir o caminho e especificar casos para quando uma nova solicitação de dados deveria ocorrer ... Mas por que todo esse aborrecimento?

4
FFrewin

Se fosse eu, eu realmente abordaria isso de maneira diferente.

eu sempre receberia 4 itens:

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

Exibir todos:

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

Qual seria a saída:

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

Em seguida, use as consultas de mídia CSS3 para ocultar três delas:

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

A maneira como exibi os dados é puramente um exemplo e conceito.

Eu sempre preferi usar o lado do cliente para detectar as larguras da tela (do jeito que deveria ser feito), e também é melhor desempenho.

Espero que isto ajude

1
Lodder

Melhor pratica? A melhor prática é não tentar determinar o tamanho da tela , porque, em última análise, é inútil. O que acontecerá quando um usuário de tela grande alterar o tamanho da janela do navegador, por exemplo?

Se você deseja modificar um layout , em relação ao tamanho da tela no dispositivo de um usuário, faça-o com design web responsivo.

Se você estiver preocupado com o fato de o número de itens de conteúdo que você entregar por padrão não ser adequado para dispositivos móveis, reduza seus padrões e sempre assuma o celular na primeira instância; o desenvolvimento mobile-first aborda especificamente problemas como esse.

Se você deseja fornecer aos usuários de tela grande mais itens de conteúdo, consulte técnicas carregamento condicional responsivo técnicas para obter itens extras de "tamanho da área de trabalho".

1
Seth Warburton