UIWebView изменяет размер текста после поворота: ищет объяснение магической ошибки или моей глупости
Итак, у меня есть UIWebView в моем приложении, и я загружаю в него html (статью), ставлю CSS, чтобы сделать все лучше. Это просто и понятно, и все идеально, пока я не попробую добавить чтение в ландшафтную функциональность, а затем я заметил, что UIWebView игнорирует любой css "размер шрифта", который я поместил в 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 пункт heigh margin в нижней части приложения.
И не спрашивайте, почему я снова попытался скопировать тот же код..
6 ответов:
В руководстве по веб-контенту Safariтакже упоминается, как отключить автоматическое изменение размера текста в 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;'>
Используя первые два ответа, свойство 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]; }
Вам, вероятно, просто нужно прочитать это
Аналогично, если указать только ширина видового экрана, высота и начальное значение выводятся масштабы. На рис. 3-15 показано: рендеринг одной и той же веб-страницы, когда ширина видового экрана установлена в 320. Обратите внимание, что портретная ориентация визуализируется так же, как на рисунке 3-14, но ландшафтная ориентация имеет ширину 320 пикселей, который изменяет начальный масштаб и имеет эффект увеличения, когда пользователь изменение ландшафтной ориентации.
Я попробовал ваше дело, но безуспешно.
Решение, которое сработало для меня, было:
[перезагрузка webView];
У меня есть другой способ решить ее, добавив элемент:
<table> <tr> <td> [your html content] </td> </tr> </table>
Comments