¿Cómo puedo forzar un sitio a escala para fijar para móviles (Iphone android ..)

Cuando carga mi sitio en un iphone no se reduce. Todo lo que veo es la parte superior izquierda de cientos de píxeles cuadrados. Soy nuevo en la optimización móvil, pero siento que la mayoría de las páginas se ajustan automáticamente, y la mayoría de las preguntas parecen ser para el escenario opuesto al que estoy teniendo (no forzar el teléfono a bajar de tamaño).

Quisiera que el ancho de la página entera fuera visible y lo hiciera así que el usuario tendría que acercar para leer el texto.

He intentado con y sin el siguiente código en la cabeza, pero sin efecto aparente.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- I Also tried: --> <meta name="viewport" content="width=1024, initial-scale=1"> 

Utilizando los documentos aquí: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Parecía que debía ignorar la mayoría de las propiedades de la ventana de visualización y simplemente establecer la escalabilidad del usuario a "sí". Está funcionando en mi iphone ahora.

 <meta name="viewport" content="user-scalable = yes"> 

Editar :: El sitio de probador móvil no permite la escala, por lo que sólo da scrollbars. Con un teléfono real esto funciona.

Trate de utilizar css diferentes y cambiarlos (lado del servidor) en función de la configuración del cliente. Por ejemplo, el iPhone se identificará como:

  HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3 

Dependiendo de qué lenguaje de scripting tiene disponible en el lado del servidor, puede cambiar el css.

He aquí un ejemplo.

La etiqueta de ventana gráfica controla qué parte de la página se va a mostrar inicialmente, pero la página en sí debe estar diseñada para que se muestre un tamaño de pantalla 320×460 en el iPhone sin ampliar. Si no desea modificar la estructura de la página, viewport le da control sobre cómo se muestra la página inicialmente.

Deshacerse de la width=1024 , sólo tiene que poner

 <meta name="viewport" content="width=device-width, initial-scale=1" /> 

Y, limpiar el caché del navegador de su teléfono. Incluso tendría que apagar y volver a encender después.

  • ¿Cómo mostrar la lista desplegable-ver debajo de la vista particular en android?
  • Vista de Android WebView
  • Activity.addContentView (Vista) == ViewGroup.addContentView (Ver)?
  • Cómo configurar el tamaño de la vista de superficie personalizada
  • ¿Cómo evitar que el teclado virtual de Android mueva la vista en un fragmento?
  • Poner cualquier vista sobre un VideoView en Android
  • Edición de Edición personalizada de Android y NextFocusDown
  • Android View.OnKeyListener: haga clic una vez, ejecute dos veces
  • Arrastrar y soltar iconos a la pantalla de inicio
  • Obtener el valor del atributo Hint de AttributeSet
  • Cargando imágenes remotas
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.