Resolución de pantalla en páginas web
Quisiera saber cómo resolver el problema de la resolución en páginas web para que tanto a 800x600 como a 1024x768 se viera centrada y bien la web, ocupando toda la pantalla sin tener que duplicarla. Por ejemplo:
En mi caso en la parte de arriba de la web tengo un swf, y bajo el contenido, todo ello ordenado con una tabla. El swf es superior a 800 pixels de largo, por tanto cuando tenemos resolución de 800x600 aparece muy grande y hay que usar la barra de desplazamiento. Sin embargo, con la máxima resolución se ve perfecto y encajado en la pantalla.
En definitiva, lo que me gustaría es detectar la resolución de la pantalla y en función de ello cambiar el tamaño del swf para que ocupe toda la pantalla. En tablas esto lo hacemos poniendo el tamaño con %, pero en swf no se como hacerlo. Si metemos un swf de 1000 pixels dentro de una celda al 100% con pantalla de 800x600, tiene prioridad los 1000 pixels, ¿no?
Ya se que una opción es hacerlo todo a resolución de 800x600 y se verá bien en ambos, aunque más pequeño en alta resolución. Ejemplo: www.lopetes.com
Para explicarlo más claro, me gustaría que en la siguiente url que se ve perfecta y encajada a 1024x768, hiciera lo mismo a 800x600 sin tener que duplicar archivos swf ni códigos. La url es http://www.lopetes.com/clientes.html
En mi caso en la parte de arriba de la web tengo un swf, y bajo el contenido, todo ello ordenado con una tabla. El swf es superior a 800 pixels de largo, por tanto cuando tenemos resolución de 800x600 aparece muy grande y hay que usar la barra de desplazamiento. Sin embargo, con la máxima resolución se ve perfecto y encajado en la pantalla.
En definitiva, lo que me gustaría es detectar la resolución de la pantalla y en función de ello cambiar el tamaño del swf para que ocupe toda la pantalla. En tablas esto lo hacemos poniendo el tamaño con %, pero en swf no se como hacerlo. Si metemos un swf de 1000 pixels dentro de una celda al 100% con pantalla de 800x600, tiene prioridad los 1000 pixels, ¿no?
Ya se que una opción es hacerlo todo a resolución de 800x600 y se verá bien en ambos, aunque más pequeño en alta resolución. Ejemplo: www.lopetes.com
Para explicarlo más claro, me gustaría que en la siguiente url que se ve perfecta y encajada a 1024x768, hiciera lo mismo a 800x600 sin tener que duplicar archivos swf ni códigos. La url es http://www.lopetes.com/clientes.html
2 respuestas
Respuesta de joemakina
1
El código a emplear sería el siguiente:
<script language="JavaScript1.2">
<!--
document.writeln("<b>Tú resolución es de:</b> " + screen.width + " x " + screen.height +"");
//-->
</script>
Ya de paso te doy algunos consejos:
El ancho máximo no es de 800px sino de 778 y con margenes, es decir vas a tener que cambiar el ancho de la tabla a 778 o 775 px y en las propiedades de la página cambiar todos los margenes a 0.
Si te quieres manejar con porcentajes, ok, pero recuerda que lo único que lograras sera hacer más ancha la ´página nada más... ¿Por qué? Porque el tamaño de las fuentes no cambian a no ser que cargues una hoja de estilo diferente en función de la resolución detectada.
Una técnica o truquillo con flash es la de hacer los bordes laterales en difuminado y centrar la animación en la celda, de esta manera aunque la página sea ancha igual quedará bien.
Aquí un ejemplo:
http://www.villaveiran.com/comunidad/
<script language="JavaScript1.2">
<!--
document.writeln("<b>Tú resolución es de:</b> " + screen.width + " x " + screen.height +"");
//-->
</script>
Ya de paso te doy algunos consejos:
El ancho máximo no es de 800px sino de 778 y con margenes, es decir vas a tener que cambiar el ancho de la tabla a 778 o 775 px y en las propiedades de la página cambiar todos los margenes a 0.
Si te quieres manejar con porcentajes, ok, pero recuerda que lo único que lograras sera hacer más ancha la ´página nada más... ¿Por qué? Porque el tamaño de las fuentes no cambian a no ser que cargues una hoja de estilo diferente en función de la resolución detectada.
Una técnica o truquillo con flash es la de hacer los bordes laterales en difuminado y centrar la animación en la celda, de esta manera aunque la página sea ancha igual quedará bien.
Aquí un ejemplo:
http://www.villaveiran.com/comunidad/
Respuesta de xiuhblaze
1
Es cierto, una celda se va a ajustar al tamaño de la imagen más grande si esta supera el tamaño asignado a la tabla.
Lo que puedes hacer es utilizar el width y el height en el objeto donde escribes el flash, algo como:
<object id=MiFlash ......... width="100%" height="100%" .......>
Espero te sea de ayuda, si no me comentas y vemos.
Hasta pronto.
Lo que puedes hacer es utilizar el width y el height en el objeto donde escribes el flash, algo como:
<object id=MiFlash ......... width="100%" height="100%" .......>
Espero te sea de ayuda, si no me comentas y vemos.
Hasta pronto.