Problema con viewport

Mijander #1 Sep '13

Buenas, estoy haciendo una web que da soporte a todas las pantallas más anchas de 580 pixels(inclusive). El caso es que, para pantallas más pequeñas, como las de los móviles puestos verticalmente, me gustaría hacer que la etiqueta Viewport sea:

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=0.5;">

El caso es que lo he hecho con javascript:

if( $(window).width() < 580){
    doc.getElementById("viewport").setAttribute("content", "width=device-width,initial-scale=0.5");
else{
    doc.getElementById("viewport").setAttribute("content", "width=device-width,initial-scale=1");

}

el caso es que funciona bien la primera vez que te metes, $(window).width() da como resultado 320 y se establece la escala inicial a 0.5, sin embargo, si hago un refresh $(window).width() me da 640 debido a que coge la anchura establecida por el viewport(que es el doble que la que tiene al ser la escala la mitad) y ya no funciona.

No se como hacerlo para que establezca el initial-scale a 0.5(para que se vea completa la web aunque sea en pequeñito) siempre. Es decir, que me coja la anchura real del dispositivo. He probado con screen.size y da los mismos resultados que $(window).width()

¿Alguna idea? Un saludo

Kiroushi #2 Sep '13

¿Por qué estás cogiendo el nodo meta con getElementById?

document.getElementsByName('viewport')[0]

1 respuesta

Mijander #3 Sep '13

#2 le he establecido una id, es que como antes tenía los jquery que se cargaran los últimos en lugar de en <head> lo hice sólo con javascript, y en lugar de $(window).width() usaba screen.width

El resultado es el mismo, sin embargo con $(window).width() de vez en cuando me da varias veces seguidas el resultado bueno(320) aunque si pasa un tiempo y vuelvo a recargar me da el malo(640).

1 respuesta

Kiroushi #4 Sep '13

#3 Me parece que meterle un id a un meta es un pifiazo gordo. Sobre el problema que comentas no te sabría decir, si tengo un rato y me acuerdo haré la prueba.

1 respuesta

Mijander #5 Sep '13

#4 jajajjaa ok, lo tendré en cuenta y lo quitaré antes de la versión definitiva. Fue un copy&paste de stackoverflow.

En concreto este:
http://stackoverflow.com/questions/4787304/how-to-set-viewport-only-for-iphone-or-ipad

Para iphone navigator.userAgent.match(/iPhone/i) me valdría pero para los móviles con android no porque creo que el userAgent me daría siempre "Android" fuera tablet o móvil de cualquier resolución

d253 #6 Sep '13

Esto es te servira: http://jsbin.com/axUNerO/3/
No estaba seguro si usas jQuery por que solo usas un selector $(window) y esta todo a pelo.

Por si acaso te explico:
Creas un listener que lanza una funciónn cuando la media query se valida. Haces una comprobación si esta o no esta dentro de el rango de la query y colocas un atributo u otro al viewport. ( como ya te han dicho ponerle un id no es buena idea )

var mq = window.matchMedia("(max-width: 580px)");
mq.addListener(siCambia);
siCambia(mq);

function siCambia(mediaQuery){
 
var eviewport = document.getElementsByName("viewport")[0];
  
if (mediaQuery.matches) {
  eviewport.setAttribute("content", "width=device-width,initial-scale=0.5");
}else {
  eviewport.setAttribute("content", "width=device-width,initial-scale=1");
} 
  
}

Ese problema con el tamaño de $(window).width() lo puedes solucionar filtrando por portrait o landscape.

1

Problema con viewport

Usuarios habituales

Tags