traba - Transición a iOS 7: configuración correcta de la ventana gráfica para jQuery/iPhone Webapps visualizados en iPads

teclados para iphone 6

Question

Tenemos una aplicación con esencialmente un UIWebView que está configurado como "Aplicación de iPhone" en XCode.

Hasta ahora, todo funcionó bien, pero con el simulador de iPad para iOS 7, la aplicación ahora aparece en "Pantalla completa" inmediatamente, lo que no sería el problema, pero WebView también parece haber aumentado.

Solo veo el 1/4 superior derecho del sitio web cargado y tengo que desplazarme para ver el resto.

Usamos jQuery mobile 1.3.1 en la aplicación.

editar

Encontré el error. Parece que la semántica del metaelemento de la ventana gráfica cambió entre las versiones de iOS.

Cambiando

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

a

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

funcionó para mí, pero no estoy seguro de si este es el camino a seguir, ya que la página de demostración de jQuery Mobile establece la conexión con el dispositivo. Cuando cargo la Demo-Page desde mi UIWebView obtengo el mismo efecto.

¿Hay alguna información sobre "el camino correcto" para establecer la ventana gráfica, especialmente porque la página de demostración usa ancho = ancho del dispositivo

Answer 1

En iOS 7 se ha cambiado la forma de interpretar la metaetiqueta de vieport. Aquí puede encontrar una explicación https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.0/#//apple_ref/doc/uid/TP40013202-CH1-SW75 .

Anteriormente, cuando se modificaban los parámetros de la ventana gráfica, los parámetros anteriores nunca se descartaban. Esto causó que los parámetros de la ventana gráfica sean aditivos.

Por ejemplo, si comenzó con width = device-width y luego lo cambió a initial-scale = 1.0, terminó con una ventana gráfica computada de ancho = device-width, initial-scale = 1.0.

En iOS 7, esto ha sido abordado. Ahora terminas con una ventana gráfica de escala inicial = 1.0.

Esta es la pregunta: ¿cómo afectará esto el diseño en iOS6 <y en dispositivos Android?

Answer 2

Estaba teniendo el mismo problema con un teléfono y eliminar el ancho del dispositivo no me solucionó el problema.

Tuve que modificar Classes / MainViewController.m

Yo modifiqué:

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];

    return [super webViewDidFinishLoad:theWebView];
}

Ser:

- (void)webViewDidFinishLoad:(UIWebView*)theWebView {

    theWebView.backgroundColor = [UIColor blackColor];

    float version = [[[UIDevice currentDevice] systemVersion] floatValue];

    if (version >= 7.0)
    {

        [self.webView stringByEvaluatingJavaScriptFromString:@"$(''meta[name=viewport]'').attr(''content'',''width=device-width, initial-scale=.42 user-scalable=no'');$(''body'').animate({''opacity'':1},300)"];
    }

    return [super webViewDidFinishLoad:theWebView];
}

* ACTUALIZACIÓN *

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];


    // iPhone app zoom on iPad with iOS 7 fix

    float version = [[[UIDevice currentDevice] systemVersion] floatValue];

    if (version >= 7.0)
    {

        [self.webView stringByEvaluatingJavaScriptFromString:@"if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {$(''meta[name=viewport]'').attr(''content'',''width=device-width, initial-scale=.42 user-scalable=no'');}"];
    }

    [self.webView stringByEvaluatingJavaScriptFromString:@"$(''body'').animate({''opacity'':1},300)"];

    return [super webViewDidFinishLoad:theWebView];
}

Moví el fundido en el código fuera de la instrucción if, ya que <iOS7 permanecería en la opacidad 0 de lo contrario

* FINALIZAR ACTUALIZACIÓN *

Usé la variable "versión" y la instrucción if para apuntar a iOS 7. Gracias @leetvin

Luego, redujo la escala de la ampliación

Inicialmente hubo un salto entre la vista ampliada y la vista reducida, de modo que establecí la opacidad del cuerpo en 0 en css y animé / desvanecí después del cambio de tamaño

Answer 3

Mi respuesta es la mejor, puedes intentarlo, debería ser compatible con ios5 / ios6 / ios7, incluido Android

código:

<meta content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0" name="viewport" />

iOS7 uiwebview puede querer cambiar la altura:

código:

float version = [[[UIDevice currentDevice] systemVersion] floatValue];

self.webView = [[UIWebView alloc]init];
if (version >= 7.0)
{
    self.webView.frame=CGRectMake(0, 0, rect.size.width, rect.size.height);
}
else
{
    self.webView.frame=CGRectMake(0, 0, rect.size.width, rect.size.height-20);
}

Answer 4

Tenía una aplicación para iPhone que solo se "rompería" en un iPad iOS7. Al eliminar "ancho = ancho del dispositivo" de la metaetiqueta de la ventana fija, se corrigió.

Answer 5

Usé tu respuesta pero no resuelve todos mis problemas. El tamaño inicial permanece con el ancho de ipad en lugar de iphone.

Además, cuando intento escribir en un texto, el zoom de la pantalla en sí mismo para llenar el cuadro de texto y solo cuando presiono la pantalla se vuelve a clasificar según el tamaño correcto del iphone.

Todavía necesito una solución adecuada para esto.