¿Por qué los encabezados HTTP no incluyen la resolución del dispositivo, la densidad de píxeles, etc.?

Actualmente estoy desarrollando un sitio web receptivo con consultas de medios CSS. Sería mucho más fácil si el servidor devolviera un HTML / CSS diferente para cada ventana gráfica.
Me preguntaba por qué el cliente no podía incluir su información de ventana gráfica al solicitar un archivo HTML. Este comportamiento ya es común para devolver sitios web en el idioma correcto usando el Accept-Languageencabezado.

En resumen, no fue así como Wild Wild Web fue diseñada para funcionar.

El diseño original era simplemente que el HTML daba al navegador pistas sobre el documento. Qué bits enfatizar, dónde ir para obtener archivos de imagen. Las decisiones sobre la fuente (así como el tamaño) eran el trabajo del navegador y la configuración de configuración local.

Sí, sé que el mundo ha avanzado, y ahora los diseñadores web esperan controlar cada píxel que nuestros ojos puedan ver. En el pasado, ese era el trabajo del tema de escritorio para hacer eso.

Creo que no tienes la idea del diseño web receptivo . Servir diferentes HTML / CSS / JS basados ​​en el navegador web del cliente ha estado allí por un tiempo y estoy bastante seguro de que todavía hay algunos sitios web que todavía lo hacen: un ejemplo muy claro es la forma tradicional de servir un móvil tema amigable para un sitio web.

Lo que te falta, en mi opinión, es que en tu situación si el usuario cambia el puerto de vista de vertical a horizontal, entonces no obtendrás ninguna respuesta receptiva, a menos que actualices la página. Se requiere la misma acción si cambia el tamaño de la ventana del navegador web o cambia el zoom predeterminado. También un elemento en una página podría responder a otros elementos también. Entonces, si oculta la barra lateral a la derecha, por ejemplo, el contenido principal responderá al cambio. Esto no será posible en su camino, de nuevo, a menos que actualice la página.

Además, las solicitudes HTTP no solo están diseñadas para servir toda la página web. En muchos casos va a enviar el pedido de enviar / recibir datos sin formato, archivos, imágenes, etc., que no necesitan para llevar a cabo la metainformación puerto de vista y la sobrecarga en una escala como Internet será una conjetura que muchos .

¿Estás seguro de que estás haciendo un diseño receptivo? El diseño receptivo es técnicamente la combinación de diseño fluido y consultas de medios.

El diseño fluido resuelve el 90% del problema de la ventana gráfica para usted, si es inteligente sobre cómo diseñar las cosas. Las consultas de medios le brindan el otro 10% al cambiar las características de la cuadrícula en función de las dimensiones actuales.

Si está tratando de hacer solo fluidos (porcentajes en todas partes, tamaño relativo en todo, nada especificado en píxeles, etc.), se encuentra con el problema de qué hacer cuando la ventana gráfica tiene un tamaño dramáticamente diferente (como una vista horizontal de escritorio frente a Una vista de retrato móvil). Algunas cosas simplemente no encajan cuando pasas de 2048 px a 640 px. Cuando intenta hacer solo consultas de medios, termina con docenas y docenas de saltos de consultas de medios, y básicamente está microgestionando sus clases de CSS en ese caso. Ningún enfoque es adecuado para RWD: debe combinar los dos para obtener todo.

Mi consejo: cree tres o cuatro "resoluciones y orientaciones nominales" diferentes, como Escritorio horizontal, vertical y horizontal de iPad, vertical y horizontal de iPhone, y trátelas como sus estructuras alámbricas para trabajar. Luego configure sus consultas de medios para esos descansos. Luego, trabaje muy duro para cumplir con esos pocos descansos, utilizando diseños fluidos para lograrlo, muy probablemente con una cuadrícula CSS de algún tipo (hay docenas de ellos preconstruidos para usted, o puede rodar el suyo).

Si tiene un sitio web dinámico que obtiene el contenido, un código como este hará el truco (en 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: 'credenciales' es para cookie de sesión

Luego puede leer esos encabezados del lado del servidor con, por ejemplo (en 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) {
        ...

Esto no funcionará por la sencilla razón de que el usuario puede cambiar el tamaño de la ventana del navegador sin volver a cargar la página.

El diseño receptivo significa que el diseño cambia dinámicamente en respuesta a diferentes tamaños de ventana gráfica y otros factores. Por lo tanto, si el diseño se repara en el lado del servidor en función del tamaño de la ventana gráfica en el momento de la solicitud, no respondería si el usuario cambia el tamaño de la ventana. Es por eso que las consultas de medios se evalúan en el lado del cliente.