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.