¿Cómo puedo hacer que mi sitio web se aleje de manera predeterminada en los teléfonos móviles?

Question

Así que quiero que los usuarios puedan ver mis antecedentes en mi sitio web. Actualmente, el ancho de mis sitios web es y cuando ve el sitio web en un navegador móvil (por ejemplo, iPhone, Opera Mini) se acerca el texto y el usuario no puede ver el fondo.

He intentado utilizar la etiqueta meta viewport sin éxito. ¿Cómo hago para que mi sitio web se reduzca de forma predeterminada en los navegadores móviles?

EDIT:

Aquí está el código que he probado hasta ahora:

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

Answer 1

Sé que esta es una pregunta antigua, pero estoy respondiendo de todos modos en caso de que alguien más necesite la respuesta.

A partir de septiembre de 2011, Opera Mini todavía está utilizando la versión 2.5 del motor de renderizado Presto. La ventana gráfica no está disponible en Opera hasta Presto 2.7. (Opera Mobile, nuestro navegador del teléfono inteligente hace ventana de ayuda.)

Prueba esto:

<meta name="viewport" content="initial-scale=0.25"> 

Cuando se incluyen width=device-width, el navegador 'mágicamente' ** encuentra el área de contenido y lo ajusta para llenar el ancho del dispositivo. Si desea que el fondo se asome, necesitará encoger toda la página para que quepa en la ventana gráfica.

Dejar <meta name=viewport> por completo también funcionará, pero normalmente verá menos de la imagen de fondo.

Idealmente, sin embargo, también debería usar consultas de medios para crear un sitio que funcione en una variedad de anchuras.

** Utilizando heurísticas de algún tipo que un desarrollador de navegador podría explicar mejor que yo.

Answer 2

Me sorprende meta viewport no funcionó para usted (en Mobile Safari). ¿Puedes publicar lo que usaste?

ACTUALIZACIÓN: Esto generalmente funciona para mí ... darle una oportunidad:

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

Si eso funciona, a continuación, puede empezar a jugar con los valores de la escala para que los usuarios zoom si quieren a, y por cuánto.

Answer 3

Después de mucho ensayo y error obtuve lo siguiente para que funcione correctamente en iPhone 5.0.1 y Android 2.3.6. El sitio fue diseñado para un ancho de 480. Dependiendo del ancho de su sitio, debe jugar con el valor de ancho para el iPhone.

<meta name="viewport" content="width=520, target-densitydpi=high-dpi" /> 
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" /> 
<meta name="HandheldFriendly" content="true" /> 
<meta name="apple-mobile-web-app-capable" content="yes" />