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

7

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 la información de su ventana gráfica al solicitar un archivo HTML. Este comportamiento ya es común para devolver sitios web en el idioma correcto utilizando el encabezado Accept-Language .

    
pregunta eliocs 25.03.2014 - 18:38

5 respuestas

18

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 sugerencias sobre el documento. Qué bits enfatizar, dónde ir para obtener archivos de imagen. Las decisiones sobre la fuente (así como el tamaño) fueron el trabajo del navegador y la 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 pasado, ese era el trabajo del tema de escritorio para hacer eso.

    
respondido por el Michael Shaw 25.03.2014 - 18:48
8

Creo que no tienes totalmente la idea de Diseño web responsivo . Servir diferentes HTML / CSS / JS basado 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 siguen haciendo eso. Un ejemplo muy claro es la forma tradicional de servir un móvil. Tema amigable para un sitio web.

Lo que se está perdiendo, en mi opinión, es que en su escenario, si el usuario cambia el puerto de visualización de vertical a horizontal, no obtendrá ninguna respuesta de respuesta, a menos que actualice 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. Por lo tanto, 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 la página web completa . En muchos casos, está enviando una solicitud para enviar / recibir datos, archivos, imágenes, etc. que no necesitan llevar en la metainformación del puerto de visualización y la sobrecarga en una escala como Internet Supongo que será mucho.

    
respondido por el Mahdi 25.03.2014 - 19:01
2

¿Está seguro de que está haciendo un diseño receptivo? El diseño responsivo 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 usted es inteligente en cuanto a la forma en que expone las cosas. Las consultas de medios le permiten obtener el otro 10% cambiando las características de la cuadrícula según 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 es dramáticamente diferente en tamaño (como un escritorio Vista del paisaje frente a una vista de retrato móvil. Algunas cosas simplemente no encajan cuando pasas de 2048px a 640px. Cuando intentas hacer solo consultas de medios, terminas con docenas y docenas de saltos de consultas de medios, y básicamente estás microgestionando tus clases de CSS en ese caso. Ninguno de los dos enfoques es adecuado para RWD, tiene que combinar los dos para obtener todo.

Mi consejo: crea tres o cuatro "resoluciones y orientaciones nominales" diferentes, como el paisaje de escritorio, la vertical y horizontal del iPad, la vertical y horizontal del iPhone, y trátalas como tus esquemas para trabajar. A continuación, configure sus consultas de medios para esos descansos. Luego, trabaje realmente duro para mantener esos pocos descansos, utilizando diseños fluidos para lograrlo, probablemente con una cuadrícula de CSS de algún tipo (hay docenas de ellas creadas previamente para usted, o puede rodar la suya propia).

    
respondido por el Calphool 25.03.2014 - 20:45
1

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

Diseño sensible significa que el diseño cambia dinámicamente en respuesta a diferentes tamaños de vista y otros factores. Por lo tanto, si el diseño se fija en el lado del servidor según el 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 esto que las consultas de medios se evalúan en el lado del cliente.

    
respondido por el JacquesB 21.12.2016 - 12:02
0

Si tienes un sitio web dinámico que recupera 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 puedes 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) {
        ...
    
respondido por el Ame Nomade 21.12.2016 - 08:30

Lea otras preguntas en las etiquetas