UIWebView изменяет размер текста после поворота: в поисках объяснения магической ошибки или моей глупости

Question

поэтому у меня в приложении есть UIWebView, и я загружаю в него html (статью), добавляю CSS, чтобы все стало лучше. Это просто и понятно, и все идеально, пока я не попытаюсь добавить чтение в функциональность ландшафта, а затем я заметил, что UIWebView игнорирует любой CSS-код "font-size", который я вставил в HTML, и резко увеличивает размер шрифта после перехода в альбомный режим.

Я потратил около 4-5 часов (я новичок в программировании приложений для Iphone, но я довольно упрям, когда дело доходит до того, чтобы что-то сделать правильно), пытаясь это исправить. Перепробовал много-много опций конфигурации - НИЧЕГО.

И сегодня вечером произошло нечто волшебное. Просто посмотрите на источник:

Пейзаж с Жуком:

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

Пейзаж исправлен (размер шрифта больше не меняется):

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

Как видите, я только один раз добавил тот же код и увеличил маржу (минус) на один пункт. И сделал setFrame снова (нет, он не исправляет изменение размера только с одним набором setFrames).

Я рад, что это работает, но я хотел бы знать, КАК и ПОЧЕМУ, так что я могу сделать это "правильным образом", потому что теперь код выглядит глупо и имеет 1 высоту в нижней части приложения.

И не спрашивайте, почему я попытался скопировать и вставить тот же код снова ..

Answer 1

В руководстве по веб-контенту Safari также упоминается, как отключить автоматическое изменение размера текста в CSS, что решило проблему в моем случае.

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

Answer 2

И волшебное решение было:

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

Если бы я только знал об этом неделю назад .. Столько времени, столько нервов потеряно ..

Answer 3

Используя первые два ответа, свойство CSS:

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

и метатег:

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

Мне удалось внедрить оба в существующий веб-сайт, используя этот код 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);

Использование webViewDidFinishLoad из 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

Возможно, вам просто нужно прочитать это

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

Аналогично, если указать только ширина области просмотра, высота и начальная масштаб выведен. Рисунок 3-15 показывает рендеринг одной и той же веб-страницы, когда ширина области просмотра равна 320. Обратите внимание, что портретная ориентация отображается так же, как на рисунке 3-14, но альбомная ориентация поддерживает ширину 320 пикселей, что изменяет начальную шкалу и имеет эффект увеличения, когда пользователь изменения в альбомной ориентации.

Answer 5

Я попробовал ваше дело, но не повезло.

Решение для меня работало было:

[перезагрузка webView];

Answer 6

У меня есть другой способ решить эту проблему, добавив элемент:

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