Comunidad de diseño web y desarrollo en internet online

100% width y height VS Velocímetro Android 2.1

Foros de discusión > CSS y HTML

Citar            
MensajeEscrito el 27 May 2011 11:38 am
¡Hola buenas gentes! ¿Qué tal? Yo como siempre, a dar problemas por aquí y por allá, jeje. El caso es que estoy en proceso de hacer una Web compatible con cualquier plataforma a excepción de algunas que yo considero obsoletas o que para la web serían imposibles de adaptar. El caso es que tengo un problema con Android con su navegador predeterminado de la versión 2.1 con su velocímetro.

He de aclarar que la resolución de la pantalla es de 800x480 y que el Width y el Height al que nos referimos es al 100% en ambos valores.

Bueno, el caso es que cuando cargo la página en formato horizontal la pantalla Web se muestra tal cual tengo pensado, se adapta a la pantalla al 100% (800x440 con la barra de herramientas), sin embargo, si ladeo la pantalla y la pongo vertical o incluso, la cargo en vertical con actualizar y todo, la adaptación falla pero desmesuradamente saliendo una resolución de salida de 800x1267 (Con la barra de herramientas).

¿Alguien sabe a que es debido? ¿Hay alguna forma de arreglar este error?

Muchas gracias gentes. Un saludo!

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 27 May 2011 11:59 am
Por cierto, se me olvidó mencionar que el sistema Web ha sido probado en Symbian S3, Symbian S60, Samsung, Sony Eircson (Java), IE7 y 8, FF, Opera, Safari y Chrome a parte de Android. En todos estos sistemas el funcionamiento es impecable, incluyendo velocímetro o resizes de pantalla, pero en Android falla y quisiera saber porque y como poderlo solucionar. Muchas gracias por todo gentes. Un saludo.

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 27 May 2011 01:14 pm
¿Y el código problemático nos lo imaginamos nosotros o hacemos uso de nuestras artes adivinatorias?.

Haz lo siguiente: escribe el código mínimo y necesario para poder reproducir el problema, lo posteas aquí y así podremos investigar el tema. No todo el mundo tiene todos esos celulares y muchos no van a descargarse el SDK de Android solo por ti. Pero da la causalidad que yo sí lo tengo, pero lo que no tengo es tu código para poder reproducir el problema.

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Citar            
MensajeEscrito el 27 May 2011 01:24 pm
¡xD! Perdona DriverOp, y muchas gracias por responderme tan pronto, ahora mismo hago un código sencillo sobre el tema y lo expongo para que lo pruebes. Por cierto, yo no uso el SDK, uso una Tablet PC Booq Verne, pero usa ese sistema operativo. No es que sea un máquina con la informática pero estuve mirando eso y vi ese problema. Ahora genero el código y lo posteo, y otra vez, muchas gracias men.

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 27 May 2011 01:44 pm
Bueno, son en total 3 archivos, uno HTML, otro CSS con el problema y otro JS para verificar la existencia del problema, allá van por el orden que he dicho:

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>
         Prueba Android
      </title>
      <link rel="stylesheet" href="estilo.css" type="text/css" />
      <script src="script.js" language="JavaScript1.2" type="text/javascript">
      </script>
   </head>
   <body>
      <div id="fondo">
      </div>
      <div id="txt">
      </div>
   </body>
</html>

Código :

body,html
{
   padding:0px 0px 0px 0px;
   background-color:#666666;
}

#fondo
{
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:100%;
   background-color:#BBBBBB;
   z-index:1;
}

#txt
{
   position:absolute;
   top:20px;
   left:30px;
   width:200px;
   height:20px;
   background-color:#FFFFFF;
   border:1px;
   border-color:#000000;
   z-index:2;
}

Código Javascript :

var n=new Array();
var funcion=function(){
   if(n[0]!=document.getElementById("fondo").offsetWidth || n[1]!=document.getElementById("fondo").offsetHeight){
      n=new Array(document.getElementById("fondo").offsetWidth,document.getElementById("fondo").offsetHeight);
      document.getElementById("txt").innerHTML=n[0]+"x"+n[1];
   };
};

window.onload=function(){
   setInterval("funcion()",50);
};


Bueno, ante todo muchas gracias por vuestra ayuda, me es muy útil. Un saludo gentes. y gracias personalmente DriverOp, jeje.

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 28 May 2011 03:10 am
El css para #fondo deberia hacerlo funcionar correctamente, el javascript lo veo innecesario, intenta comentar el javascript y prueba en Android. Si funciona, genial. Sino, empezamos a revisarlo mas detenidamente.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado     Web

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 30 May 2011 01:30 pm
Hola NEO_JP. ¿Qué tal? Perdona no contestarte estos días pero me tocó hacer un trabajo y no pude conectarme hasta ahora que acabo de llegar. Voy a copiar el código, lo comento y lo posteo. ¿ok? Por cierto, he de decirte que el JavaScript solo es para verificar que funciona, realmente no hace absolutamente nada, de hecho sobra, lo único que hace es decirte el tamaño de #fondo, y de hecho en todos los navegadores te pone el tamaño real, y con ésto verifico el tamaño dentro de Android, que sale totalmente erróneo, es decir, es como si tienes la pantalla en horizontal y la tienes a 800x480, sin embargo, la inclinas y es como si la tuvieras a 1280x800, una cosa rarísima. De todas formas te lo comento para que lo entiendas.

Muchas gracias por responderme a mi pregunta men. Un saludo.

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 30 May 2011 01:38 pm
Aquí dejo comentado el código JavaScript para que lo entiendan. Muchas gracias por el esfuerzo y la dedicación que me dan.

Código Javascript :

// Primero creo una variable Array(); que me permita poner en ella
// los dos valores que necesito para comprobar el buen funcionamiento
// del fondo. Ambos valores son el ancho y el largo del fondo en
// píxels (n[0]; y n[1]; sucesivamente).
var n=new Array();
// Ahora creo la función que se bucleará cada 50 milésimas de segundo
// y que funcionará como escuchador.
var funcion=function(){
   // Para evitar un consumo innecesario de procesador, corto el 
   // bucle si éste ya ha sido activado y no hubo cambios, de lo
   // contrario ejecuto el tema propio la función. Para dicha
   // verificación verifico que los valores n[0]; y n[1]; son
   // realmente los que tienen que ser. Si no es caso, comenzamos:
   if(n[0]!=document.getElementById("fondo").offsetWidth || n[1]!=document.getElementById("fondo").offsetHeight){
      // Primero genero los valores n[0]; y n[1]; para evitar
      // volver a la función en caso de que siga todo igual.
      n=new Array(document.getElementById("fondo").offsetWidth,document.getElementById("fondo").offsetHeight);
      // Ahora escribo en el DIV #txt los valores de n[0]; y n[1];
      // sucesivamente que me dirán el tamaño del fondo (ALTOxANCHO).
      document.getElementById("txt").innerHTML=n[0]+"x"+n[1];
   };
};
// Creo una función que cuando se cargue la página completamente se
// ejecute.
window.onload=function(){
   // La ejecución de dicha función es el bucle de la ejecución
   // funcion(); cada 50 segundos.
   setInterval("funcion()",50);
};
// De esta forma accedo a la información que necesito para verificar el
// tamaño del fondo.

Muchas gracias por todo gentes, espero que se entienda bien. ¡Un saludo!

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 30 May 2011 01:58 pm
Hola, ah ya entiendo, recuerdo haber necesitado algo similar para revisar tamanos y esas cosas cuando trabajas en celulares, ya que no tenemos herramientas tipo firebug y el tamano de la pantalla NO ayuda.

En vez de usar un interval cada 50 milisegundos (es inhumano), puedes usar este codigo, no lo he probado pero estoy casi seguro que funciona, recuerdo haber hecho muchas pruebas y haber llegado a la conclusion que window.onresize siempre se ejecutaba cada que el acelerometro cambiaba la posicion de la pantalla.

Código Javascript :

var debugOffset = function() {
    var bg = document.getElementById('fondo');
    var txt = document.getElementById('txt');
    txt.innerHTML = bg.offsetWidth + 'x' + bg.offsetHeight;
};

window.onresize = function() {
   debugOffset();
};

window.onload = function() {
   debugOffset();
};


Luego intentare revisar un poco mas el CSS y quizas hacer una prueba, hablamos luego.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado     Web

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 30 May 2011 02:21 pm
¡Buenas de nuevo NEO_JP! Muchas gracias por el código que proporcionaste para el escuchador, ahora no tengo tiempo para probarlo pues tengo que ir a un asunto urgente que me acaba de surgir, pero a la vuelta lo pruebo, pues si con el acelerómetro funciona con onresize(); buf!! Media visa solucionada, jeje.

Muchísimas gracias por todo men. ¡Un saludo!

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 31 May 2011 06:28 pm
Hola de nuevo gentes, por fin he podido tener tiempo para probar el nuevo script que me proporcionó NEO_JP, pero siento deciros, sobre todo a ti, NEO_JP, por tu esfuerzo, que el script da el mismo resultado que el mio, sin embargo, me encantó saber que hay escuchadores en modo función como este, y me gustaría saber donde adquirir todos los existentes, pues son de gran ayuda y simplifican mucho los códigos. Muchas gracias por vuestra paciencia y ayuda gentes.

Por cierto, sigue en pie este POST, si alguien sabe como eliminar ese error de CSS en Android será mi ídolo, jeje. Muchas gracias por todo gentes. Un saludo.

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 31 May 2011 06:56 pm

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado     Web

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 01 Jun 2011 09:14 am
Buenas NEO_JP. ¿Qué tal? Acabo de probar el link que me dejaste. Ante todo, muchísimas gracias por tus esfuerzos, pero me dio el mimos resultado que en mi anterior experimento, de hecho, al leer que ya lo probaste tu en tu celular Android, supongo que ya será problema de mi Tablet PC :___(. Yo uso la versión Andriod 2.1. Sé que si lo tienes en la 2.2 hay muchísimas mejoras, inclusive en el navegador. Si usas una superior a 2.1, podría ser el motivo de que a ti te vaya bien y a mi no. De todas maneras, estoy sospechando de un detalle que posiblemente sea de mi Tablet PC, porque estuve leyendo una y otra vez las características técnicas de la tablet y me he llevado una sorpresa con un detalle que no es verdad, y es que me pone que la pantalla es de 1280x800, sin embargo, la pantalla es de 800x480, pero si dejo la pantalla vertical, me lo mide como 1280x800, es decir, que es una p*** timada esta Tablet PC... ¬¬', jeje, caí en una trampa comercial xD.

De todas maneras, muchísimas gracias por vuestra ayuda, sobre todo a ti NEO_JP, que te esforzaste muchísimo, pero creo que queda aclarado que el error reside en mi Tablet PC, y os hice una comedura de olla como una casa. Lo siento mucho, y muchísimas gracias por vuestros esfuerzos y dedicación.

P.D.: No pilléis nunca la Tablet PC Booq Verne, es la causante de semejante desaguisado... xD

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 01 Jun 2011 01:17 pm
Hmm.. tengo Android 1.6 en mi celular, y bueno, osea, no revises la cantidad de pixeles que tenga la pantalla, simplemente revisa si el toda la pantalla del navegador se pone azul (detras hay un color rojo) y no genera scroll. Si eso sale asi, entonces funciona.

http://gyazo.com/9b62f831cda046e4ef1f04103af5c675.png

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado     Web

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 01 Jun 2011 02:05 pm
He ahí mi error, jeje, el caso es que mi pantalla es de 800x480, y bueno... El caso es que cuando lo dejo horizontal, está perfectamente, sin scroll ni nada, a pantalla completa, sin embargo, si lo giro y lo pongo en posición vertical se scrollea hasta hacer los 1280x800, ahí reside el foco del problema y estoy viendo que es porque me timaron con la Tablet, pues es una Tablet de una resolución de 800x480 reales y luego admite royos de hasta 1280x800, pero scrollados, y eso no lo especifica así, sino que especifica que es de 1280x800 la pantalla, hasta lo pone la caja, pero es mentira... estoy con una depresión... He estado engañado demasiado tiempo... SNIF! A partir de ahora, mi relación con la Tablet PC ya no será la misma... SNIF! jeje, en fin... Mala pata que tuve, por eso me salía mal el experimento, no era por otra cosa, pues si tu lo estás usando con Android 1.6, con esta tendría que ir así, y según la resolución de salida cuando falla es de 1280x800, así que... Error de la Tablet PC mái, jeje.

Bueno NEO_JP, muchísimas gracias por todos tus esfuerzos en aclarar este asunto, de verdad, me has sido de gran ayuda, y ahora sé que funciona perfectamente en Android gracias a ti, jeje. Ya te iré informando si me encuentro otro error por aquí, jeje. Un saludo men, y de verdad, muchas gracias por todo. :D

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 01 Jun 2011 02:22 pm
Por que no intentas con posiciones absolutas sin dimensiones de alto o largo?

Código :

#bg {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado     Web

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 01 Jun 2011 09:40 pm
Buenas de nuevo NEO_JP, eso de forzar los límites también lo hiciera y nada, de hecho, como resultó lo mismo pues decidí el dejarlo como lo tenía, de todas todas, volví a probarlo y nada, me sigue asestando el mismo error. Si ya te digo, debe de ser por el sistema este raro de las 1280x800 del sistema... De todas maneras, muchísimas gracias por tu esfuerzo y dedicación en este tema, me has sido de gran ayuda para aclarar todo esto :D. Bueno men, me piro que mañana me toca madrugar y toca chollar de lo lindo, jeje. Ya hablamos crack, un saludo y muchas gracias por todo men.

Por miglug

Claber

113 de clabLevel



Genero:Masculino  

Envíale un mensaje privado    

chrome
Foros de discusión > CSS y HTML

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.