Controlar tamaño de web con Javascript
Hola a todos, tengo el siguiente problemilla a ver si alguno sabe como puedo solucionarlo.
Estoy haciendo una web que tiene que pasar la AA, el cliente m ha pedido que se vea la web tb a 800x600.
En principio está con un diseño liquido pero hay una imagen de la cabecera que tiene un ancho que no puedo tocar.
La idea era crear un JS para que mire la resolcuion de pantalla y si es <= que 800 mire los divs q tiene que ajustar. Todo esto lo tendría que hacer en un evento que sea el onLoad del bodu, pero la pregunta es: ¿Esto es accesible?
Entiendo que tendria que tener un [noscript][/noscript] pero en este caso como puedo ajustar el cotenido del css a 800x600 sin tener que reahcer toda la hoja de estilos de la estructura?
os dejo el codigo para cuando se ejecuta el JS por si lo necesitais ver:
<code>
function pantalla(){
if (screen.width<=800){
document.getElementById("inicio").style.width = "25.9%";
document.getElementById("bandaAzul").style.width = "74.1%";
document.getElementById("entradillaImg").style.width = "25.9%";
document.getElementById("entradillaImg").style.overflow = "hidden";
document.getElementById("entradilla").style.width = "74.1%";
document.getElementById("menu").style.width = "25.9%";
}
}
</code>
Mucgas gracias!
dpcani
orange
Le he cambiado el título al post para que identifique bien el problema.
Es confidencial el proyecto y no puedo colgarlo aqui.
orange
Le he cambiado el título al post para que identifique bien el problema.
orange
Yo creo que todo se podría solucionar en cliente, andando hábil con los estilos, pero para decirlo a ciencia cierta habría que ver un ejemplo colgado o algo así.
Con PHP sólo no puedes conocer la resolución del cliente. Vas a tener que utilizar una mezcla de PHP con JS.
dpcani
orange
Por cierto, voy a pasar esto a Programación Cliente, que creo que le va más.
Muchas gracias Orange, te cuento la estructura pq no voy a poder hacer lo dl contenedor:
tengo esto:
<div id="contenedor">
</div id="cabecera>
LOGO + H1 Q ES UN UNA IMAGEN
<div id="inicio">con un link</div>
<div id="banda">esta es decortativa</div>
</div>
<div id="contenidoMenu">
<div id="fotoEntrada"></div
<div id="menu"> todo el menu"</div>
</div>
<div id="contenidoInterior">
CONTENIDO DE LA WEB
</div>
</div>
El contenedor exterior tiene un %
la cabecera un 100%, el logo tiene un 20% (aprox) el h1 el resto
inicio tiene un 20%, la banda el resto
El menu tiene un 20% el contenido interior el resto.
Si reduzco el navegador a 800x600 los divs, inicio y todo lo que contiene contenidoMenu, al resducir el % me lo escala por lo que me desajusta toda esa parte.
La solucion que estaba pensando es si hay forma con algun lenguaje de servidor ASP, por ejemplo, saber que resolucion tiene el usuario, si es as, lo tendría solucionado pq pondria un IF para cambiar eun DIV por otro... pero ando un poco perdido.....
orange
Por cierto, voy a pasar esto a Programación Cliente, que creo que le va más.
orange
En este caso en concreto siento hasta el infinito la pérdida de datos en Domestika, porque me escribí un par de post kilométricos explicando cómo hacer esto.
No utilices JS, mete toda la web en un contenedor y utiliza una combinación de min-width y maxwidth para navegadores que sigan los estándares y mete una expression para Explorer 6 e inferiores, así:
(por cierto, dentro del contenedor tiene que haber al menos un elemento cuyas medidas estén declaradas en porcentajes para que se adapte a la redimensión)
<code>
/* Esto para estandares */
#contenedor {
margin: 0 auto;
min-width: 78em;
max-width: 98em;
}
/* Y esto para Explorer */
#contenedor {
width: 98em; /* Tamaño por defecto - Usuarios sin javascript */
width: expression(((document.documentElement.clientWidth && document.documentElement.clientWidth < 800) || (document.body.clientWidth && document.body.clientWidth < 800)) ? "78em" : ((document.documentElement.clientWidth && document.documentElement.clientWidth > 1000) || (document.body.clientWidth && document.body.clientWidth > 1000)) ? "98em" : "auto" );
}
</code>
No me hagas explicarte la expression, pero quédate que vale para DOCTYPES HTML 4.01 y para XHTML. Lo que la hace válida en Explorer 5.x (Windows y Mac) y Explorer 6.
A nivel de accesibilidad el usuario habrá de tener JS activado para que la cosa rule en Explorer 6 inferiores, pero como das un tamaño por defecto y no estás jugando con ninguna característica que afecte al contenido de la página no te pueden plantear problemas.
Por cierto, yo metería todos los parches para Explorer en una CSS específica para él y enlazada vía comentarios condicionales.
Además de mantener separada la CSS "limpia" de la que tiene hacks, las hojas enlazadas por CC no le llegan al validador. Este detalle es importante en niveles Doble A porque el Checkpoint 3.2 ( URL ) dice "Cree documentos que estén validados por las gramáticas formales publicadas", es decir, tienes que validar XHTML y CSS