Por que os cabeçalhos HTTP não incluem resolução do dispositivo, densidade de pixels etc.?

10

Atualmente, estou desenvolvendo um site responsivo com consultas de mídia CSS. Seria muito mais fácil se o servidor retornasse um HTML / CSS diferente para cada viewport.
Fiquei me perguntando por que o cliente não pôde incluir suas informações de viewport ao solicitar um arquivo HTML. Esse comportamento já é comum para retornar sites no idioma correto usando o Accept-Languagecabeçalho.

eliocs
fonte
Você pode enviá-lo via JavaScript e depois carregar um arquivo CSS. Eu acho que o problema é que a resolução pode mudar ...
Knerd
Isso não é RWD. Esses HTML / CSS não oferecem nenhum efeito responsivo, a menos que você atualize a página.
Mahdi
Resolução, estilos de fonte, tamanhos de fonte, tipo de navegador, tamanho da tela, todos são mutáveis ​​de dispositivo para dispositivo, você está fazendo uma pergunta do tipo Web 1.0, ou para algo dinâmico como ASP, PHP, adição de Javascript etc. feliz com o seletor de mídia que o html oferece.
Jeff Langemeier
11
E se o software sem nenhuma capacidade de exibição de imagem solicitar seu html em vez de um navegador? Tal como um leitor de tela? Ou um navegador baseado em terminal?
Jack

Respostas:

18

Em resumo, não foi assim que a Wild Wild Web foi projetada para funcionar.

O design original era simplesmente que o HTML dava ao navegador dicas sobre o documento. Quais bits enfatizar, para onde ir para obter arquivos de imagem. As decisões sobre a fonte (bem como qual o tamanho) foram o trabalho do navegador e as configurações locais.

Sim, eu sei que o mundo mudou e agora os web designers esperam controlar cada pixel que nossos olhos conseguem ver. No passado, esse era o trabalho do tema da área de trabalho para fazer isso.

Michael Shaw
fonte
3
Eu diria que ainda hoje deve ser o trabalho do dispositivo. Configure dois conjuntos CSS mínimos mínimos e deixe os dispositivos lidarem com isso a partir daí.
Jeff Langemeier
@JeffLangemeier Concordo totalmente. Mesmo que esta resposta esteja correta em essência, no entanto, não se trata de RWD.
Mahdi
11
Talvez o tempo para redesenhar um novo formato web que separa completamente o conteúdo do projeto :)
eliocs
@ Mahdi Eu realmente não sinto que a questão fosse essencialmente sobre o RWD, era uma pessoa tentando reinventar a roda e se perguntando por que a especificação HTML não tem <necessidade pessoal arbitrária>.
Jeff Langemeier
@eliocs existe, é chamado de html e CSS. HTML é a estrutura e CSS é o design. Ou se você quiser separação teor total do seu design, ir para um sistema dinâmico como PHP, Django em python, etc ...
Jeff Langemeier
8

Eu acho que você não entendeu totalmente o Responsive Web Design . Servir diferentes HTML / CSS / JS com base no navegador do cliente já existe há algum tempo e tenho certeza de que ainda existem alguns sites fazendo isso - um exemplo muito claro é a maneira antiga de servir um celular Tema amigável para um site.

O que está faltando, na minha opinião, é que, no seu cenário, se o usuário alterar a porta de visualização de retrato para paisagem, você não receberá nenhuma resposta responsiva, a menos que atualize a página. A mesma ação é necessária se você redimensionar a janela do navegador da web ou alterar o zoom padrão. Além disso, um elemento em uma página também pode responder a outros elementos. Portanto, se você ocultar a barra lateral à direita, por exemplo, o conteúdo principal responderá à alteração. Isso não será possível no seu caminho, novamente, a menos que você atualize a página.

Além disso, as solicitações HTTP não são projetadas apenas para servidor de toda a página da web. Em muitos casos, você está enviando uma solicitação para enviar / receber dados simples, arquivos, imagens, etc., que eles não precisam levar nas meta-informações da porta de visualização e a sobrecarga em uma escala como a Internet será muito, eu acho. .

Mahdi
fonte
A sobrecarga também seria útil para servir imagens, imagine que você retornou imagens de menor resolução para dispositivos móveis. Concordo que a viewport muda depois que a página é carregada é uma grande falha na minha consideração.
eliocs 25/03
@eliocs Você está certo, pois as imagens são realmente importantes. Obrigado pela correção.
Mahdi
Não acho que esse seja diretamente o problema que o design responsivo tenta resolver. Na maioria dos casos, o objetivo é garantir que a menor quantidade de recursos necessária para a primeira renderização seja fornecida. Você ainda forneceria um design responsivo em cima disso. Ter as informações na solicitação não proíbe o design responsivo. Por exemplo, você pode estar usando HTTP2 para obter as imagens corretas para srcset na primeira resposta. Você não pode fazer isso a menos que tenha informações sobre o tamanho da janela de exibição, mas ainda pode usar o srcset para manter as coisas responsivas.
22619 monokrome
2

Tem certeza de que está fazendo um design responsivo? O design responsivo é tecnicamente a combinação de design de fluidos e consultas de mídia.

O design de fluidos resolve 90% do problema da janela de visualização para você, se você for inteligente sobre como definir as coisas. As consultas de mídia dão a você os outros 10%, alterando as características da grade com base nas dimensões atuais.

Se você está tentando fazer apenas fluidez (porcentagens em todos os lugares, dimensionamento relativo de tudo, nada especificado em pixels etc.), você se depara com o problema do que fazer quando a janela de exibição é drasticamente diferente em tamanho (como uma paisagem na área de trabalho vs uma vista de retrato móvel). Algumas coisas simplesmente não se encaixam quando você passa de 2048px a 640px. Quando você tenta fazer apenas consultas de mídia, você acaba com dezenas e dezenas de quebras de consulta de mídia e, nesse caso, basicamente gerencia microgerenciando suas classes CSS. Nenhuma das abordagens é adequada para o RWD - você precisa combinar os dois para obter tudo.

Meu conselho: crie três ou quatro "resoluções e orientações nominais" diferentes - como paisagem de desktop, retrato e paisagem de iPad, retrato e paisagem de iPhone - e trate-as como seus wireframes para trabalhar. Em seguida, configure suas consultas de mídia para essas pausas. Em seguida, trabalhe duro para manter essas poucas interrupções, usando layouts fluidos para realizá-la - provavelmente com algum tipo de grade CSS (existem dezenas delas pré-construídas para você ou você pode fazer a sua própria).

Calphool
fonte
1

Se você tem um site dinâmico que busca o conteúdo, um código como esse fará o truque (no ES6):

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

Nota: 'credenciais' é para cookie de sessão

Então você pode ler os cabeçalhos do lado do servidor, por exemplo (em PHP):

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...
Ame Nomade
fonte
Esta é a única resposta correta agora.
marvindanig
1

Isso não funcionará pela simples razão de que o usuário pode redimensionar a janela do navegador sem recarregar a página.

Design responsivo significa que o layout muda dinamicamente em resposta a diferentes tamanhos de viewport e outros fatores. Portanto, se o design for corrigido no lado do servidor com base no tamanho da janela de visualização no momento da solicitação, ele não responderia se a janela fosse redimensionada pelo usuário. É por isso que as consultas de mídia são avaliadas no lado do cliente.

JacquesB
fonte