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

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.

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.

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

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

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) {
        ...

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.