UIWebView cambia el tamaño del texto después de rotarlo: busca una explicación para un error mágico o mi estupidez

Question

así que tengo UIWebView en mi aplicación y le cargué algo de html (artículo), puse algo de CSS para hacer todo mejor. Eso es simple y claro, y todo está perfecto hasta que intento agregar la lectura en la funcionalidad de paisaje y luego me he dado cuenta de que UIWebView ignora cualquier css " tamaño de fuente " He puesto HTML y aumenta el tamaño de la fuente drásticamente después de rotar al modo horizontal.

He pasado cerca de 4-5 horas (soy nuevo en la programación de la aplicación de Iphone, pero soy bastante obstinado cuando se trata de hacer algo bien) tratando de arreglarlo. Probé montones y montones de opciones de configuración: NADA.

Y esta noche ha pasado algo mágico. Basta con mirar la fuente:

Paisaje con el error:

r = CGRectMake(0.0, 0.0, 480.0, 320.0);
[adView.view removeFromSuperview];
if (!isFullScreen) {
    minus = 50 + minus;
    [controlsView setFrame:CGRectMake(0, r.size.height - 50, r.size.width, 50)];        
} else {
    minus = 20; 
}

[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

Paisaje fijo (el tamaño de fuente ya no cambia):

r = CGRectMake(0.0, 0.0, 480.0, 320.0);
[adView.view removeFromSuperview];
if (!isFullScreen) {
    minus = 50 + minus;
    [controlsView setFrame:CGRectMake(0, r.size.height - 50, r.size.width, 50)];        
} else {
    minus = 20; 
}
[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

if (!isFullScreen) {
    minus = 1 + minus;
} else {
    minus = 20+1;   
}
[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];  
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)];

Como puede ver, solo agregué el mismo código una vez más y aumenté el margen (menos) en un punto. Y lo hizo setFrame nuevamente (no, no arregla el cambio de tamaño con solo un conjunto de setFrames).

Estoy contento de que funcione, pero me gustaría saber CÓMO y POR QUÉ, así que puedo hacerlo "de manera correcta", porque ahora el código parece estúpido y tiene un margen de 1 punto en la parte inferior de la aplicación.

Y no preguntes por qué he intentado copiar y pegar el mismo código otra vez ...

Answer 1

Y la solución mágica fue:

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>

Si tan solo lo supiera hace una semana ... Mucho tiempo, tantos nervios se perdieron ...

Answer 2

El Safari Web Content Guide también menciona cómo deshabilitar el tamaño automático del texto en el CSS, que resolvió el problema en mi caso.

html {
    -webkit-text-size-adjust: none; /* Never autoresize text */
}

Answer 3

Usando las dos primeras respuestas, la propiedad CSS:

html {
    -webkit-text-size-adjust: none; /* Never autoresize text */
}

y la etiqueta meta:

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>

Pude inyectar ambos en un sitio web existente, usando este código javascript:

var style = document.createElement(\"style\"); 
document.head.appendChild(style); 
style.innerHTML = "html{-webkit-text-size-adjust: none;}";
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);

Uso de webViewDidFinishLoad desde UIWebViewDelegate:

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

    NSString *javascript = @"var style = document.createElement(\"style\"); document.head.appendChild(style); style.innerHTML = \"html{-webkit-text-size-adjust: none;}\";var viewPortTag=document.createElement('meta');viewPortTag.id=\"viewport\";viewPortTag.name = \"viewport\";viewPortTag.content = \"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\";document.getElementsByTagName('head')[0].appendChild(viewPortTag);";
    [webView stringByEvaluatingJavaScriptFromString:javascript];

}

Answer 4

Probablemente solo necesites leer esto

https://developer.apple .com / library / content / documentation / appleapplications / reference / safariwebcontent / UsingtheViewport / UsingtheViewport.html

  

Del mismo modo, si solo especifica la   ancho de la ventana gráfica, la altura y la inicial   La escala se infiere. La figura 3-15 muestra   la prestación de la misma página web cuando   el ancho de la ventana gráfica se establece en 320.   Tenga en cuenta que la orientación vertical   se representa igual que en la figura   3-14, pero la orientación del paisaje.   mantiene un ancho de 320 píxeles, lo que    cambia la escala inicial y tiene la   efecto de acercamiento cuando el usuario   cambios en la orientación horizontal.

Answer 5

Probé tu caso pero no tuve suerte.

La solución funcionó para mí fue:

[recarga webView];

Answer 6

Tengo otro método para resolverlo agregando el elemento:

<table>
<tr>
<td>
  [your html content]
</td>
</tr>
</table>