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

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

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

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

Answer 2

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

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

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 / библиотека / содержание / документация / appleapplications / ссылка / safariwebcontent / UsingtheViewport / UsingtheViewport.html

  

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

Answer 5

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

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

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

Answer 6

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

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