Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] CSS para móviles no se cumple, no me hace caso...

Estas en el tema de CSS para móviles no se cumple, no me hace caso... en el foro de CSS en Foros del Web. Lo que quiero hacer es aumentar el tamaño de los botones y texto con css para dispositivos móviles. Lo he intentado con éste código: <link ...
  #1 (permalink)  
Antiguo 01/10/2014, 11:59
Avatar de Luisa29  
Fecha de Ingreso: enero-2013
Mensajes: 193
Antigüedad: 11 años, 1 mes
Puntos: 4
Pregunta CSS para móviles no se cumple, no me hace caso...

Lo que quiero hacer es aumentar el tamaño de los botones y texto con css para dispositivos móviles. Lo he intentado con éste código:

<link href="pagina.css" rel="stylesheet" type="text/css" media="screen" />
<link href="pagina-movil.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />

Funciona con algunas cosas, pero con otras no hace nada, parece que los navegadores de móvil leen el css de la versión de escritorio y se hace un lío. ¿Cómo podría hacerlo para que únicamente lea la versión móvil? ¿hago algo mal?


Por ejemplo en la versión escritorio tengo esto así:

#botones {
width: 900px;
height: 110px;
background-color: #CCC;

}
#mov {
display:none;

}

Y la versión móvil esto:

#botones {

display:none;

}
#mov {
width: 900px;
height: 80px;


}

Pues no hace caso.


Luego otras cosas como cambiar el texto, en la de escritorio la fuente es 12 y en la versión móvil 20, pues resulta que en el móvil la fuente sale a 12.

La gracia es que para algunas cosas sí hace caso. :S

A ver si me podéis echar una mano.
  #2 (permalink)  
Antiguo 01/10/2014, 13:51
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

tienes esto en el head de tu web

Código HTML:
Ver original
  1. <meta name="viewport" content="width=device-width, initial-scale=1">
si no lo tienes ponlo

por que no basta con escribir css para movil , http://revolucion.mobi/2012/02/14/mo...cala-correcta/

espero sea eso
nos vemos
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #3 (permalink)  
Antiguo 01/10/2014, 14:21
Avatar de Luisa29  
Fecha de Ingreso: enero-2013
Mensajes: 193
Antigüedad: 11 años, 1 mes
Puntos: 4
Respuesta: CSS para móviles no se cumple, no me hace caso...

Tengo esto:

<meta name="viewport" content="width=900, initial-scale=-1.0" />

Lo puse así porque de la manera que has puesto no me funciona bien.
  #4 (permalink)  
Antiguo 01/10/2014, 14:39
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

Cita:
Iniciado por Luisa29 Ver Mensaje
Tengo esto:

<meta name="viewport" content="width=900, initial-scale=-1.0" />

Lo puse así porque de la manera que has puesto no me funciona bien.
y no te funciona?
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #5 (permalink)  
Antiguo 01/10/2014, 14:43
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

Cita:
Iniciado por herzbazi Ver Mensaje
y no te funciona?
prueba esto
Código HTML:
Ver original
  1. <link href="pagina-movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..

Última edición por herzbazi; 01/10/2014 a las 14:44 Razón: comillas
  #6 (permalink)  
Antiguo 01/10/2014, 15:33
Avatar de Luisa29  
Fecha de Ingreso: enero-2013
Mensajes: 193
Antigüedad: 11 años, 1 mes
Puntos: 4
Respuesta: CSS para móviles no se cumple, no me hace caso...

Cita:
Iniciado por herzbazi Ver Mensaje
prueba esto
Código HTML:
Ver original
  1. <link href="pagina-movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />
Nada Esto de adaptar una web a smartphone es una odisea.
  #7 (permalink)  
Antiguo 01/10/2014, 15:40
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

ok mira si necesitas puedes poner tu css en el mismo archivo de pc pero poniendo algo asi

Código CSS:
Ver original
  1. @media only screen and (max-width: 488px) {
  2. h1{
  3.       color:#000;
  4.    }
  5. }

eso seguro que si te funciona


claro yo te he puesto el ejemplo con un h1 tu pon tu codigo que ya tienes en el css para movil
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #8 (permalink)  
Antiguo 01/10/2014, 15:57
Avatar de Luisa29  
Fecha de Ingreso: enero-2013
Mensajes: 193
Antigüedad: 11 años, 1 mes
Puntos: 4
Respuesta: CSS para móviles no se cumple, no me hace caso...

Nada

Lo he puesto así:

#cabecera {
width: 900px;
height: 167px;
background-color: #CCC;

}
#cabecera-mov {
display:none;

}

@media only screen and (max-width: 488px) {
#cabecera {
display:none;

}
#cabecera-mov {
width: 900px;
height: 100px;
background-color: #CCC;

}
}


¿Está bien puesto? Quiero que la capa cabecera-mov en un PC normal esté oculta y que en la versión móvil salga la cabecera móvil y oculte la de versión de escritorio.
Lo he probado en mi Motorola Moto G (navegador Chrome y Mozilla) y sigue saliendo la cabecera de escritorio. :S
  #9 (permalink)  
Antiguo 01/10/2014, 16:07
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

si quieres tu ayudo si es asi me dices te skype y te ayudo a solventar ,,, ya me diras
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #10 (permalink)  
Antiguo 01/10/2014, 16:26
Avatar de Luisa29  
Fecha de Ingreso: enero-2013
Mensajes: 193
Antigüedad: 11 años, 1 mes
Puntos: 4
Respuesta: CSS para móviles no se cumple, no me hace caso...

Cita:
Iniciado por herzbazi Ver Mensaje
si quieres tu ayudo si es asi me dices te skype y te ayudo a solventar ,,, ya me diras
Prefiero por aquí herzbazi, ¿sabes dónde puede estar el fallo?

Es muy raro, los smartphones se comportan como PC de escritorio. Se ve muy bien la web, pero el tamaño del texto es demasiado pequeño.

Y hacer dos webs una para móvil y otra para escritorio también sería una solución, pero joer es muy engorroso, aparte que en la web tengo un wordpress y no puedo tener dos blogs.
  #11 (permalink)  
Antiguo 01/10/2014, 16:28
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

Cita:
Iniciado por Luisa29 Ver Mensaje
Prefiero por aquí herzbazi, ¿sabes dónde puede estar el fallo?

Es muy raro, los smartphones se comportan como PC de escritorio. Se ve muy bien la web, pero el tamaño del texto es demasiado pequeño.

Y hacer dos webs una para móvil y otra para escritorio también sería una solución, pero joer es muy engorroso, aparte que en la web tengo un wordpress y no puedo tener dos blogs.
tienes la web online ?
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #12 (permalink)  
Antiguo 01/10/2014, 16:32
Avatar de Luisa29  
Fecha de Ingreso: enero-2013
Mensajes: 193
Antigüedad: 11 años, 1 mes
Puntos: 4
Respuesta: CSS para móviles no se cumple, no me hace caso...

Cita:
Iniciado por herzbazi Ver Mensaje
tienes la web online ?
Ese es el problema herzbazi, que no me gustaría mostrarla. Si no ahora mismo te la pasaría sin problema para que le echases un ojo.
  #13 (permalink)  
Antiguo 01/10/2014, 16:45
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

Cita:
Iniciado por Luisa29 Ver Mensaje
Ese es el problema herzbazi, que no me gustaría mostrarla. Si no ahora mismo te la pasaría sin problema para que le echases un ojo.
jJajajajaj la pones dificil jajaja pero mira ya vi cual es tu error y tienes razon al ser chica tienes que cuidarte de cada loco que anda por aqui jaajajaj espero sea eso lo que buscas ya esta probado cuando esta en en 488 se oculta botones y aparece mov jajaj si es eso me pones mi puntillo claro si quieres jajajaj


ahi te pego un html que hice ya lo proble y ya esta mira
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=900, initial-scale=-1.0" />
  5.     <title>Document</title>
  6.     <style>
  7. #botones {
  8.     width: 900px;
  9.     height: 110px;
  10.     background-color: #CCC;
  11. }
  12. #mov {
  13.     visibility:hidden;
  14. }
  15. @media only screen and (max-width: 488px) {
  16.     #botones {
  17.         display:none;
  18.     }
  19.     #mov {
  20.         visibility: visible;
  21.         width: 900px;
  22.         height: 80px;
  23.     }  
  24. }
  25.     </style>
  26. </head>
  27.     <div id="botones">
  28.         aqui van los botones
  29.     </div>
  30.     <div id="mov">
  31.         oculto
  32.     </div>
  33.  
  34. </body>
  35. </html>
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #14 (permalink)  
Antiguo 01/10/2014, 16:50
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

estoy saliendo del trabajo si no es eso manda mensaje y al llegar a casa te sigo ayudando nos vemos
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #15 (permalink)  
Antiguo 01/10/2014, 17:01
Avatar de Luisa29  
Fecha de Ingreso: enero-2013
Mensajes: 193
Antigüedad: 11 años, 1 mes
Puntos: 4
Respuesta: CSS para móviles no se cumple, no me hace caso...

No es eso hombre jajajaja, no tengo miedo a nadie por ser mujer. Es más que nada cosas de privacidad.

Acabo de probarlo así y tampoco, es que ni se inmuta.

Creo que el problema va a estar en el Smartphone, Chrome de Android y demás. En la resolución del dispositivo.
El Motorola Moto G tiene 1280 x 720 de resolución.

A ver si me entero, esto:

@media only screen and (max-width: 488px) {

Es para dispositivos con una resolución igual o menor a 488 px no?

La gracia es que lo he probado poniéndolo así:

@media only screen and (max-width: 800px) {


y tampoco va. Que asco de Smartphones, y si lo consigo habrá gente que visitará la página con otras resoluciónes y las verán como la versión de escritorio, ¿no? porque habrá cientos de resoluciones distintas en móviles.

Esto es una locura jajaja.
  #16 (permalink)  
Antiguo 01/10/2014, 18:55
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

Cita:
Iniciado por Luisa29 Ver Mensaje
No es eso hombre jajajaja, no tengo miedo a nadie por ser mujer. Es más que nada cosas de privacidad.

Acabo de probarlo así y tampoco, es que ni se inmuta.

Creo que el problema va a estar en el Smartphone, Chrome de Android y demás. En la resolución del dispositivo.
El Motorola Moto G tiene 1280 x 720 de resolución.

A ver si me entero, esto:

@media only screen and (max-width: 488px) {

Es para dispositivos con una resolución igual o menor a 488 px no?

La gracia es que lo he probado poniéndolo así:

@media only screen and (max-width: 800px) {


y tampoco va. Que asco de Smartphones, y si lo consigo habrá gente que visitará la página con otras resoluciónes y las verán como la versión de escritorio, ¿no? porque habrá cientos de resoluciones distintas en móviles.

Esto es una locura jajaja.
pues me parece extraño por que yo lo he probado y si que funciona , hazme un favor mira la pagina en el ordenador y reduce le tamaño del navegador , tendria que funcionar el cambio de css si lo hace es tu movil, de lo contrario hay algo por ahi que no permite que funcione el css
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #17 (permalink)  
Antiguo 01/10/2014, 19:22
Avatar de Luisa29  
Fecha de Ingreso: enero-2013
Mensajes: 193
Antigüedad: 11 años, 1 mes
Puntos: 4
Respuesta: CSS para móviles no se cumple, no me hace caso...

He dado con la tecla, pero no sé si será correcto.

Así:

Código:
@media screen and (min-width: 1024px){

#cab {
	width: 900px;
	height: 167px;
	background-color: #CCC;

}
#mov {
	width: 900px;
	height: 167px;
	background-color: #CCC;
display:none;

}

}

@media screen and (max-device-width: 480px) {
	
#cab {
	display:none;
		width: 900px;
	height: 167px;
	background-color: #CCC;

}
#mov {
	visibility: visible;
	width: 900px;
	height: 106px;
	background-color: #CCC;

}
}
No sé si será correcto. Para equipos de más de 1024 de resolución muestra la página en modo de escritorio.
  #18 (permalink)  
Antiguo 01/10/2014, 19:30
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

claro que es correcto de hecho si vas a leer bootstrap te daras cuenta que asi se usa

medidas de bootstrap

Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)

estas medidas son las que tienes que usar dentro de cada mediaquerie así es como deberia de funcionar chica. para cada uno de los dispositivos no importando que tipo de dispositivo sea.

aqui van otras pero si usas las de arriba saldra todo muy bien ,

Código CSS:
Ver original
  1. @media (min-width: 1200px) { ... }
  2.  
  3. /* Portrait tablet to landscape and desktop */
  4. @media (min-width: 768px) and (max-width: 979px) { ... }
  5.  
  6. /* Landscape phone to portrait tablet */
  7. @media (max-width: 767px) { ... }
  8.  
  9. /* Landscape phones and down */
  10. @media (max-width: 480px) { ... }
  11.  
  12. /* Smartphones (portrait and landscape) ----------- */
  13. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
  14.  
  15. /* Smartphones (landscape) ----------- */
  16. @media only screen and (min-width : 321px) { }
  17.  
  18. /* Smartphones (portrait) ----------- */
  19. @media only screen and (max-width : 320px) { }
  20.  
  21. /* iPads (portrait and landscape) ----------- */
  22. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
  23.  
  24. /* iPads (landscape) ----------- */
  25. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }
  26.  
  27. /* iPads (portrait) ----------- */
  28. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }
  29.  
  30. /* Desktops and laptops ----------- */
  31. @media only screen and (min-width : 1224px) { }
  32.  
  33. /* Large screens ----------- */
  34. @media only screen and (min-width : 1824px) { }
  35.  
  36. /* iPhone 4 and high pixel ratio devices ----------- */
  37. @media
  38. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  39. only screen and (min-device-pixel-ratio : 1.5) { }


sabes usar bootstrap , es muy bueno para ahorarte trabajo. si no pues te puedo dar unos video cursos muy buenos donde te enseñan las bases y algo de nivel medio tambien duran como 3 horas cada uno .
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #19 (permalink)  
Antiguo 01/10/2014, 20:45
Avatar de Luisa29  
Fecha de Ingreso: enero-2013
Mensajes: 193
Antigüedad: 11 años, 1 mes
Puntos: 4
Respuesta: CSS para móviles no se cumple, no me hace caso...

Cita:
Iniciado por herzbazi Ver Mensaje
claro que es correcto de hecho si vas a leer bootstrap te daras cuenta que asi se usa

medidas de bootstrap

Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)

estas medidas son las que tienes que usar dentro de cada mediaquerie así es como deberia de funcionar chica. para cada uno de los dispositivos no importando que tipo de dispositivo sea.

aqui van otras pero si usas las de arriba saldra todo muy bien ,

Código CSS:
Ver original
  1. @media (min-width: 1200px) { ... }
  2.  
  3. /* Portrait tablet to landscape and desktop */
  4. @media (min-width: 768px) and (max-width: 979px) { ... }
  5.  
  6. /* Landscape phone to portrait tablet */
  7. @media (max-width: 767px) { ... }
  8.  
  9. /* Landscape phones and down */
  10. @media (max-width: 480px) { ... }
  11.  
  12. /* Smartphones (portrait and landscape) ----------- */
  13. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
  14.  
  15. /* Smartphones (landscape) ----------- */
  16. @media only screen and (min-width : 321px) { }
  17.  
  18. /* Smartphones (portrait) ----------- */
  19. @media only screen and (max-width : 320px) { }
  20.  
  21. /* iPads (portrait and landscape) ----------- */
  22. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
  23.  
  24. /* iPads (landscape) ----------- */
  25. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }
  26.  
  27. /* iPads (portrait) ----------- */
  28. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }
  29.  
  30. /* Desktops and laptops ----------- */
  31. @media only screen and (min-width : 1224px) { }
  32.  
  33. /* Large screens ----------- */
  34. @media only screen and (min-width : 1824px) { }
  35.  
  36. /* iPhone 4 and high pixel ratio devices ----------- */
  37. @media
  38. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  39. only screen and (min-device-pixel-ratio : 1.5) { }


sabes usar bootstrap , es muy bueno para ahorarte trabajo. si no pues te puedo dar unos video cursos muy buenos donde te enseñan las bases y algo de nivel medio tambien duran como 3 horas cada uno .
Muchísimas gracias herzbazi, por todo.

Pero ahora hay otro problema, al poner el horizontal el móvil sale la versión de escritorio.
  #20 (permalink)  
Antiguo 02/10/2014, 10:33
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años
Puntos: 36
Respuesta: CSS para móviles no se cumple, no me hace caso...

hola chica , yo te aconsejaria que juegues con rangos en los mediaqueries para evitar confuciones

mira

Código CSS:
Ver original
  1. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }

logicamente tedras que determinar cuales son los rangos
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..
  #21 (permalink)  
Antiguo 02/10/2014, 10:37
 
Fecha de Ingreso: febrero-2014
Ubicación: Bilbao
Mensajes: 36
Antigüedad: 10 años
Puntos: 0
Respuesta: CSS para móviles no se cumple, no me hace caso...

pues añadele un tercer QUERIE con medidas para tablet y tendras mejor adaptacion a los dispositivos

Etiquetas: background, color, cumple, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:53.