Resolucion pantalla con javascript

annekee · #1 (**permalink**) 18/10/2009, 07:34

Hola!!
Se q ha miles de preguntas al respecto de ajustar una web a la pantalla de acuerdo a la resolucion del usuario, pero no he encontrado una respuesta concreta la cual pueda emplear. Mi web la diseñe con una resolucion de 1024px x720px, la estoy haciendo en php modular (utilizo div's) y algunas veces posiciones relativas, por lo q algunas respuestas q se relacionan con porcentaje de tablas no creo q me ayuden. El asunto es q ya esta practicamente lista, ahora solo la pruebo en un servidor local x lo q se me coplica revisarla en otra resolucion de monitor.
He encontrado un codigo en JavaScript q al parecer me puede servir pero algo esta fallando xq no hace nada, este lo coloco inmediatamente despues de la etiqueta <body>

<script type="text/javascript" language="javascript1.2">
</script>

podrian ayudarme, lo agradeceria bastante!!
Y en caso q este solo sirviera para un navegaor en particular o los posibles errores o desventajas de su uso me gustaria me dijeran, soy nueva en esto y no se si convenga utilizar esto.

Gracias

ceSharp · #2 (**permalink**) 19/10/2009, 04:22

Hola annekee,

Lo primero --> es mejor colocar el bloque de <script type... ></script> antes de que acabe el </head> de tu página. algo así:
-------------------
<html><title>titulo</title>
<head>
<meta ..../>
<script type....>
......
</script>
</head>
<body>
......
</body>
</html>
-------------------------------
esto es una estructura básica para HTML (no sé si para PHP cambia, porque yo de PHP no sé ná)

segundo--> el bloque de javascript no se ejecuta porque no hay ninguna orden que lo accione, o sea, no está metido dentro de ninguna función que se llame de alguna manera y, con ese nombre, poder llamarla en la carga de la página.
SOLUCION:
metemos el bloque de condiciones en una función-->
---------------------------
function comprobarScreen()
{ if(window.screen.availWidth <= 640)
{window.parent.document.body.style.zoom="62%";}
if(window.screen.availWidth == 800)
{window.parent.document.body.style.zoom="78%";}
if(window.screen.availWidth == 1024)
{window.parent.document.body.style.zoom="100%";}
if(window.screen.availWidth >= 1280)
{window.parent.document.body.style.zoom="125%";}
}
------------------------
y en la carga de la página llamamos a esta función:
-------------------
<body onloadi="comprobarScreen();"
-------------------
y debería de funcionarte.

por último con tus cuatro condiciones solo compruebas si la pantalla es menor o igual que 640px, que sea de 800px, de 1024px o que sea superior o igual a 1280... por lo que hay 'vacios legales' donde no se ejecuta ninguna acción (si por ejemplo el ancho es de 1050). Trata de mejorar las condiciones para que en cualquier caso marque un ancho óptimo.

salu2

ceSharp · #3 (**permalink**) 19/10/2009, 04:23

por cierto...

el evento en el body no es 'onloadi' jejeje se me ha escapao la 'i'

el evento correcto es onload. quedaría así

<body onload="comprobarScreen();" >

annekee · #4 (**permalink**) 21/10/2009, 07:36

Muchisimas gracias ceSharp eres genial!!!!!!!!!!!!!!!!!!

Con tu ayuda logre q el script funcionara haciendo los cambios en la funcion y bueno, no habia tomado en cuenta los 'vacios legales' q mencionas, pero tienes mucha razon y los he hecho, funciona de maravilla.

Solo tengo una duda, este script funciona bien con explorer? estoy trabajando en un servidor local y como uso mac no puedo probarlo con explorer, me gustaria saber si crees haya algun problema con ese navegador, ya ves q es algo especial.

Y una vez mas muchisimas gracias x la ayuda.
Saludos.

conchyta · #5 (**permalink**) 22/10/2009, 06:15

Hola buenas...
aprovechando el mensaje y la duda de Annekee, me prodriais ayudar?
Tengo más o menos el mismo problema...estoy creando una web en mi pc de sobremesa con una resolución de 1024x768... pero cuando veo la web en el portatil que tiene la resolución 960x600 (si no recuerdo mal) no la veo centrada...

He visto lo del script pero no entiendo muy bien donde hay que colocarlo...si hay que poner el script que puso anneke

Después de head (como pongo todos los scripts)

o poner el que ha puesto ceSharp

Y otro problema donde pongo esto y como

<body onloadi="comprobarScreen();"

Lo he intentado poner de mil y una formas pero no doy con ello...Se que puedo parecer un poco torpe, pero poquito a poco voy aprendiendo las cosas.

Por cierto uso el frontpage no se si esto cambia las cosas.

Mi intento de web es esta

perso.gratisweb.com/conchyta/conchy.htm

Pongo el código de mi web en otro mensaje porque aquí sería demasiado grande

Os quedaría tremendamente agradecida si me echais una mano...es que soy muy cabezona y hasta que no doy con las soluciones no puedo parar.

Saludos

conchyta · #6 (**permalink**) 22/10/2009, 06:24

No puedo poner el código porque es demasiado grande...

Perdón por mi torpeza

Adler · #7 (**permalink**) 22/10/2009, 06:32

Hola

Hazlo como dijo ceSharp. En cuanto donde insertas el bloque, pues puedes hacerlo en el head o en el body en este caso es indiferente

Suerte

conchyta · #8 (**permalink**) 22/10/2009, 07:13

Hola Alder

Gracias por la pronta respuesta pero mi duda es pongo esto tal y como lo puso ceSharp

function comprobarScreen()
{ if(window.screen.availWidth <= 640)
{window.parent.document.body.style.zoom="62%";}
if(window.screen.availWidth == 800)
{window.parent.document.body.style.zoom="78%";}
if(window.screen.availWidth == 1024)
{window.parent.document.body.style.zoom="100%";}
if(window.screen.availWidth >= 1280)
{window.parent.document.body.style.zoom="125%";}
}
y lo pongo cuando veo el primera head (es decir como pego todos los scripts)

O pongo este otro que puso annekee

<script type="text/javascript" language="javascript1.2">
</script>

y donde tengo que poner esto y si lo pongo tal y como está

<body onload="comprobarScreen();" >

Me podeís llamar burra si quereis jajaja, pero es que no doy con ello.

Adler · #9 (**permalink**) 22/10/2009, 07:33

Hola

Tranquila todos empezamos así. Me tenías que haber visto a mi hace como un año

Insertalo de esta manera

Cita:

<html>
<head>
<script type="text/javascript">
function comprobarScreen()
{ if(window.screen.availWidth <= 640)
{window.parent.document.body.style.zoom="62%";}
if(window.screen.availWidth == 800)
{window.parent.document.body.style.zoom="78%";}
if(window.screen.availWidth == 1024)
{window.parent.document.body.style.zoom="100%";}
if(window.screen.availWidth >= 1280)
{window.parent.document.body.style.zoom="125%";}
}
</script>
</head>
<body onload="comprobarScreen();">
contenidos
</body>
</html>

Suerte

annekee · #10 (**permalink**) 22/10/2009, 09:10

Hola conchyta!
Mira el asunto esta asi, debes de colocar la funcion tal cual la corrigio ceSharp.
Primero en el head deberas colocar la funcion, no olvidando especificar antes q es un codigo script, es decir, coloca
------
<script type="text/javascript" language="javascript1.2">
------
e inmediatamente la funcion corregida despues (como lo ha indicado ceSharp) en la carga de la pagina llamas la funcion mediante
-------
<body onload="comprobarScreen();">
-------
y eso es todo.

Y bueno para mejorar el script no olvides la nota acerca de los 'vacios legales', lo q significa q deberas usar rangos, tomando en cuenta todos los valores posibles para evitar esos 'vacios'.

Suerte!!

conchyta · #11 (**permalink**) 22/10/2009, 10:35

Hola de nuevo chicos...os cuento...´

Jajaja por favor no os riais más que lo hago yo de mi jajaj...

Resulta que me pongo a hacerlo en una copia de la web para probarlo....FUNCIONAAAAAAAAAAAA VIVAAAAAAAAAAAAAAAAAA....suena el movil...mi marido que está todo enfadado porque lleva media hora y no tiene sitio para aparcar...yo le escucho pacientemente y... se me va de la azotea lo que he hecho jajajaja...

Solución de andar por casa...copio todo el código que está bien y lo pongo en la web original...parece que funciona....

Ahora tendre que poner en marcha las neuronas medianamente inteligentes que tengo para hacerlo en las otras páginas.

Chicos gracias por vuestra paciencia y por la rápida respuesta....

Ya os cuento como me va yendo el tema vale?

Ays si es que el movil siempre suena en el momento más inoportuno ajjaja...

De verdad graciasssssssss ya os voy contando

conchyta · #12 (**permalink**) 27/10/2009, 12:43

Bueno vine a daros las gracias de nuevo

Ya he configurado casi todas las páginas con el script y FUNCIONAAAAAAA jajajaj.

Muackkkkkkkkkkkkk sois geniales.

CONCHY

conchyta · #13 (**permalink**) 26/01/2010, 14:36

Bueno pues estoy aqui de nuevo con otra duda, referente al mismo tema...

Resulta que los reyes me han traido un portatil nuevo con windows 7 (de paso deciros que estoy encantada) pero la resolución de pantalla que tengo ahora es de 1366 x 768 px

He intentado cambiar valores en el script que me disteis...pero no he dado ni una jajaj...

<html>
<head>
<script type="text/javascript">
function comprobarScreen()
{ if(window.screen.availWidth <= 640)
{window.parent.document.body.style.zoom="62%";}
if(window.screen.availWidth == 800)
{window.parent.document.body.style.zoom="78%";}
if(window.screen.availWidth == 1024)
{window.parent.document.body.style.zoom="100%";}
if(window.screen.availWidth >= 1280)
{window.parent.document.body.style.zoom="125%";}
if(window.screen.availWidth >=1366)
{window.parent.document.body.style.zoom="Aqui no se que tanto poner%";}
}
</script>
</head>
<body onload="comprobarScreen();">
contenidos
</body>
</html>

Me podríais ayudar.

Como siempre gracias de antemano

conchyta · #14 (**permalink**) 27/02/2010, 19:02

Madre mía me acabo de dar cuenta de lo boba que estoy...lo que hace a veces encabezonarse en algo y no fijarse...

En este código está el signo > = tonta tonta tonta que me tengo que llamar...

if(window.screen.availWidth >= 1280)

es decir significa que es para resoluciones mayores o igual que 1280....

Perdonar pero quiero dejar este apartado por si nunca se sabe, alguien cometé mi misma torpeza....

Gracias y perdonar

jyepez88 · #15 (**permalink**) 02/04/2012, 00:49

Saludos, tengo un problema con el window.parent.document.body.style.zoom...el problemas es q no hace el zoom en firefox; alguien me puede decir a q se debe...he probrado en Crhome y Explorer y funciona.

De antemano gracias por su pronta respuesta.

zalito12 · #16 (**permalink**) 27/04/2012, 09:32

Si, yo estaba buscando algo así y me funciona en chrome pero en firefox no :S
Alguna idea?
Gracias

EDITO: A mi en explorer tampoco me va, solo en chrome de momento.