[SOLUCIONADO] Problema diseño web para móviles

[jorgecominges]

Hola a todos,

escribo porque estoy haciendo una web con un diseño adapte para que se pueda ver en dispositivos móviles.

He visto varios temas del foro pero no consigo resolver el problema que tengo.

He puesto dentro de head

Código:

<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0>

y luego en mi archivo css

Código:

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

Estando en el ordenador, si reduzco la ventana del navegador veo como el diseño se va adaptando a esta y cambia al ser menor de 700 px.

Mi problema viene cuando intento verla desde el iphone, que tiene una resolución de 640 px, y no veo el diseño adaptado. Tampoco lo veo con el Opera Mobile Emulator poniendo un Samsung galaxy SII.

A todo esto me surge la duda, hoy en día los smartphones tienen resoluciones que son incluso mayores a muchas pantallas de ordenador, por lo que adaptar el diseño según los pixeles me parece algo absurdo, no?

podeis ver la web aqui [URL="http://www.cominges.es/"]http://www.cominges.es/[/URL]

Muchas gracias de antemano.

[AngelKrak]

amig@ prueba con este codigo dentro del head ;)

<meta name="viewport" content="width=device-width"/>

y aqui en este codigo te falta cerrarlo

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

}

antes del cierre tiene que ir tu codigo ;) ejemplo:

@media screen and (max-width: 700px) {
body, html {
margin: 0 auto;
background: url("imagen.png");
}
}

[fede5426]

Angel, le estas diciendo que haga algo que ya hizo :/

Jorge podrías poner tu código completo para ver si podemos encontrar donde esta el problema?


Viéndolo con Chrome, sale perfecto.. (Probé con todos los iphone que da chrome a elegir)

Puede ser problema del sistema operativo, o del navegador de iphone mejor dicho, quizás necesites alguna excepción en tu hoja de estilos.. tengo la sensación de haber leído algo así en algún lugar.

[pzin]

Yo lo veo bien en un iPhone (iOS8.1.3).

Respecto a lo que comentas de la resolución de smartphones, para iOS se suele usar el DPI: https://css-tricks.com/snippets/css/...y-media-query/

Me gusta logo.

[jorgecominges]

Muchas gracias por los comentarios, al final lo he podido solucionar combiando en el viewport "content=”width=device-width" por "content=”width=285px", no se si es una forma chapucera de hacerlo pero parece que funciona.

Lo bueno es que luego lo probé en el ipad y se ve la pagina normal. Al ser tan sencilla creo que no es necesario hacer una versión para tablets. Eso si, no tengo ni idea de porque pasa, pero bueno.

De nuevo muchas gracias!