Jugar con la resolución de pantalla

visionary · #1 (**permalink**) 13/07/2005, 13:34

Hola amigos,

A base de navegar por las webs me he dado cuenta de que son muchas las que estan diseñadas para verse correctamente a 800x600, pero sin embargo si las visionas a 1024 en lugar de "descuadrarse" enteras lo que se quedan es digamos "centradas" en el explorador, con lo cual se adapta a la visión del visitante sin cambiar su estado original.

No se si me he explicado bien, pero si alguien me ha entendido lo que quiero decir me gustaria saber como hacer eso.

Gracias de antemano y disculpad las molestias,
Un saludo.

Saruman · #2 (**permalink**) 13/07/2005, 13:37

bueno, eso depende de como hagas tu sitio.
por ejemplo, si utilizas tabla, la pones a 100% el ancho y la misma siempre se verá como se dice fullscreen, independientemente del explorer que tenga el usuario.

otra seria como dices "jugando" con javascript, capturando el ancho de la pantalla.

saludos

visionary · #3 (**permalink**) 14/07/2005, 01:25

¿Alguien me puede decir donde encontrar el código en Javascript que me permite capturar el ancho de pantalla?

Es que la web donde lo quiero hacer no va con tablas... y aunque fuera con tablas no estoy interesado en eso, porque si las pongo al 100% se adaptan a todas las resoluciones pero los textos y demás no ocupan lo mismo, no se si me entendeis.

Yo lo que quiero hacer es como por ejemplo está la pagina web de este foro. Si la visionas a 800x600 se ve perfecta y a 1024 se queda centrada en el explorador, dejando un hueco a cada lado.

Muchas gracias.

#4 (**permalink**) 14/07/2005, 04:23

con este script puedes conocer los entresijos del navegador del usuario
(esta sacado de las FAQ's)

Código:

<html> 
<head> 
<script LANGUAGE="JavaScript"> 

   function getOpSys(){ 
    var sOpSys = "<b>O.S.: </b>" + navigator.appVersion.toLowerCase().split(";", 3)[2]; 
    return sOpSys; 
   } 

  </script> 
</head> 

<body style="font:normal 10px/20px verdana;"> 
<script> 
document.write("<b>Motor del Navegador:</b> "+navigator.appCodeName+"<br>"); 
document.write("<b>El Navegador es: </b>"+navigator.appName+"<br>"); 
document.write("<b>LA versión del Navegador es:</b> "+navigator.appVersion+"<br>"); 
if (navigator.javaEnabled())document.write("Tiene Java activado<br>"); 
else document.write("No tiene Java activado <br>"); 
document.write("<b>Motor del Navegador:</b> "+navigator.userAgent+"<br>"); 
document.write("<b>Idioma del Navegador:</b> "+navigator.userLanguage+"<br>"); 
document.write("<b>Anchura de la Pantalla:</b>"+screen.width+" pixels<br>"); 
document.write("<b>Altura de la Pantalla:</b>"+screen.height+" pixels<br>"); 

</script> 
<script language="JavaScript"> 
   document.writeln(getOpSys()); 
  </script> 
</body> 
</html>

saludos

visionary · #5 (**permalink**) 14/07/2005, 09:07

Gracias por las molestias cartucho, pero creo que eso no soluciona mi problema.

De todas formas gracias

Saruman · #6 (**permalink**) 14/07/2005, 09:25

y con lo q te puse??

erlingfiallos · #7 (**permalink**) 14/07/2005, 10:22

Una opcion viable seria hagas una tabla y pongas todo tu codigo de la pagina dentro de una sola celda que tendra esa tabla.. Y esa celda tendrá las propiedades de adaptarse al ancho del browser y se acomodará al contenido de tu pagina.

Código HTML:

<html>
<body>
<div align="center">
<table border="1" cellpadding="0" cellspacing="0" summary="">
	<tr>
		<td width="100%" height="100%" align="center" valign="middle">AQUI PONDRAS EL CODIGO DE TODA TU PAGINA</td>
	</tr>
</table>
</div>
</body>
</html>

Saruman · #8 (**permalink**) 14/07/2005, 10:34

Cita:

Iniciado por erlingfiallos

Una opcion viable seria hagas una tabla y pongas todo tu codigo de la pagina dentro de una sola celda que tendra esa tabla.. Y esa celda tendrá las propiedades de adaptarse al ancho del browser y se acomodará al contenido de tu pagina.

Código HTML:

<html>
<body>
<div align="center">
<table border="1" cellpadding="0" cellspacing="0" summary="">
	<tr>
		<td width="100%" height="100%" align="center" valign="middle">AQUI PONDRAS EL CODIGO DE TODA TU PAGINA</td>
	</tr>
</table>
</div>
</body>
</html>

lo mismo que puse yo...

safe · #9 (**permalink**) 14/07/2005, 12:14

Para hacer lo que queres no hace falta javascript ni nada por el estilo...
Simplemente tenes que diseñar tu sitio con un ancho no superior a 760px y centrado horizontalmente.

Si pensas usar Tablas como forma de diseño: a la tabla que contiende toda la info y el diseño le pones -> width="760" align="center".
O si pensas usar XHTML y CSS... creas un DIV que contenga la info y el diseño y le pones los estilos -> width: 760px; margin-left: auto; margin-right: auto;

De esta forma tu sitio siempre va a tener el mismo ancho y siempre va a estar centrado (obviamente en un monitor a 800*600 el sitio va a ocupar todo el ancho de la pantalla mientras que a resoluciones mayores ocupara menos espacio, pero el sitio en si no cambia para nada)

#10 (**permalink**) 15/07/2005, 01:03

hola, a ver....

con estas 2 lineas del codigo que te puse,

document.write("Anchura de la Pantalla:"+screen.width+" pixels ");
document.write("Altura de la Pantalla:"+screen.height+" pixels ");

puedes saber la resolución de pantalla del usuario. A partir de ahí con Css a algo parecido, podrías redireccionar a la página según la resolución.

Preguntaste como saber el ancho de la pantalla, pues te puse un código para saber eso y algo más...

saludos

visionary · #11 (**permalink**) 15/07/2005, 01:04

Muchas gracias a todos. Ahora creo que si lo tengo controlado.