Lo primordial es esto:
- Hacer un HTML y CSS especial para la versión móvil.
Debes colocar un script en tu versión para pc que detecte que se está viendo mediante un móvil y redireccionarlo. (Por lo pronto se los debo porque no me tocó hacer esa parte :B) - Quita todo el contenido que no sea vital.
- Hazlo lo más ligero posible. El internet en los móviles es más lento, así que también considera quitar fondos pesados e imágenes innecesarias.
- Define el ancho del contenido con porcentaje, de preferencia 100% (ya que las resoluciones varían mucho y en el caso del iPhone con solo girarlo cambia drásticamente)
- Si no quieres que el dispositivo redimensione todo; coloca este código en el < head >
< meta name="viewport" content="width=device-width" / > - En ocasiones las tipografías también se redimensionan, para evitarlo coloca este código en tu hoja de estilos:
/*only iPhone*/
@media only screen and (max-device-width: 960px) {
/*fixes too big font in mobile Safari*/
html { -webkit-text-size-adjust:none; }
}
Según dice ahí, sólo funciona en iPhone, no he podido testearlo en otros - Recuerda que los dispositivos touch no detectan el :hover en los links.
Por lo pronto es todo; conforme me vaya topando con más tips que pueda agregar los iré poniendo.
:)
Fuentes: prueba/error y mil sitios de google, de los cuales sólo guardé este:
http://www.freepx.net/blog/how-to-stop-font-resizing-on-iphone-without-affecting-zooming-in-safariwebkit/
Fuentes: prueba/error y mil sitios de google, de los cuales sólo guardé este:
http://www.freepx.net/blog/how-to-stop-font-resizing-on-iphone-without-affecting-zooming-in-safariwebkit/
