UIWebView ridimensiona il testo dopo la rotazione: cerca una spiegazione per il bug magico o la mia stupidità

Question

quindi ho UIWebView nella mia applicazione e carico un po 'di html (articolo), metto un po' di CSS per rendere tutto più bello. È semplice e chiaro e tutto è perfetto fino a quando non provo ad aggiungere la lettura nella funzionalità orizzontale e poi ho notato che UIWebView ignora qualsiasi css "font-size". Ho inserito HTML e aumenta drasticamente la dimensione del carattere dopo aver ruotato in modalità orizzontale.

Ho trascorso circa 4-5 ore (sono nuovo nella programmazione dell'applicazione Iphone, ma sono abbastanza testardo quando si tratta di fare qualcosa di giusto) cercando di risolverlo. Ho provato molte opzioni di configurazione - NIENTE.

E stasera è successo qualcosa di magico. Guarda la fonte:

Paesaggio con The Bug:

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)];

Orizzontale fisso (la dimensione del carattere non cambia più):

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)];

Come puoi vedere, ho aggiunto lo stesso codice ancora una volta e aumentato il margine (meno) di un punto. E ha impostato di nuovo setFrame (no, non risolve il ridimensionamento con un solo set di setFrames).

Sono felice che funzioni, ma mi piacerebbe sapere COME e PERCHÉ, quindi posso farlo "nel modo giusto", perché ora il codice sembra stupido e ha un margine di 1 punto nella parte inferiore dell'applicazione.

E non chiedermi perché ho provato a copiare nuovamente lo stesso codice ..

Answer 1

E la soluzione magica era:

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

Se solo lo sapessi questa settimana fa .. Così tanto tempo, così tanti nervi si sono persi ..

Answer 2

Il Guida al contenuto Web di Safari menziona anche come disabilitare il ridimensionamento automatico del testo nel CSS, che ha risolto il problema nel mio caso.

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

Answer 3

Utilizzando le prime due risposte, la proprietà CSS:

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

e il meta tag:

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

Sono stato in grado di iniettare entrambi in un sito Web esistente, usando questo codice 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);

Utilizzo di webViewDidFinishLoad da 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

Probabilmente devi solo leggere questo

https://developer.apple .com / library / content / documentazione / appleapplications / riferimento / safariwebcontent / UsingtheViewport / UsingtheViewport.html

  

Allo stesso modo, se si specifica solo il   larghezza della vista, altezza e iniziale   la scala è inferita. La Figura 3-15 mostra   il rendering della stessa pagina web quando   la larghezza della finestra è impostata su 320.   Si noti che l'orientamento verticale   è reso come nella Figura   3-14, ma l'orientamento orizzontale   mantiene una larghezza di 320 pixel, che    cambia la scala iniziale e ha il   effetto di ingrandimento quando l'utente   modifiche all'orientamento orizzontale.

Answer 5

Ho provato il tuo caso, ma senza fortuna.

La soluzione ha funzionato per me era:

[ricarica webView];

Answer 6

Ho un altro metodo per risolverlo aggiungendo elemento:

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