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

[Luisa29]

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.

[herzbazi]

tienes esto en el head de tu web

Código HTML:

<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

[Luisa29]

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.

[herzbazi]

Iniciado por Luisa29

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?

[herzbazi]

Iniciado por herzbazi

y no te funciona?

prueba esto

Código HTML:

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

[Luisa29]

Iniciado por herzbazi

prueba esto

Código HTML:

<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.

[herzbazi]

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

Código CSS:

@media only screen and (max-width: 488px) {
h1{
      color:#000; 
   }
}
 

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

[Luisa29]

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

[herzbazi]

si quieres tu ayudo si es asi me dices te skype y te ayudo a solventar ,,, ya me diras

[Luisa29]

Iniciado por herzbazi

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.

[herzbazi]

Iniciado por Luisa29

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 ?

[Luisa29]

Iniciado por herzbazi

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.

[herzbazi]

Iniciado por Luisa29

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=900, initial-scale=-1.0" />
    <title>Document</title>
    <style>
#botones {
    width: 900px;
    height: 110px;
    background-color: #CCC;
}
#mov {
    visibility:hidden;
}
@media only screen and (max-width: 488px) {
    #botones {
        display:none;
    }
    #mov {
        visibility: visible;
        width: 900px;
        height: 80px;
    }   
}
    </style>
</head>
<body>
    <div id="botones">
        aqui van los botones
    </div>
    <div id="mov">
        oculto
    </div>
 
</body>
</html>
 

[herzbazi]

estoy saliendo del trabajo si no es eso manda mensaje y al llegar a casa te sigo ayudando nos vemos

[Luisa29]

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.

[herzbazi]

Iniciado por Luisa29

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

[Luisa29]

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.

[herzbazi]

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:

@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }
 
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) { }
 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) { }
 
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
 
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }
 
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }
 
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) { }
 
/* Large screens ----------- */
@media only screen and (min-width : 1824px) { }
 
/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
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 .

[Luisa29]

Iniciado por herzbazi

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:

@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }
 
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) { }
 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) { }
 
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
 
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }
 
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }
 
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) { }
 
/* Large screens ----------- */
@media only screen and (min-width : 1824px) { }
 
/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
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.

[herzbazi]

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

mira

Código CSS:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
 

logicamente tedras que determinar cuales son los rangos

[Xetori]

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