旋转后UIWebView调整文本大小:寻找魔法bug或我的愚蠢的解释
-
06-07-2019 - |
题
所以我在我的应用程序中有UIWebView,我加载了一些HTML(文章)给它,放一些CSS,使一切更好。这简单明了,一切都很完美,直到我尝试在横向功能中添加阅读,然后我注意到UIWebView忽略了任何css" font-size"旋转到横向模式后,我放入HTML并大幅增加字体大小。
我花了大约4-5个小时(我是编程Iphone应用程序的新手,但在制作正确的东西时我很顽固)试图修复它。尝试了很多很多配置选项 - 没什么。
今晚发生了一些神奇的事情。看看来源:
使用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)];
修复了横向(字体大小不再更改):
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(不,它不会仅通过一组setFrame修复大小调整)。
我很高兴它有效,但我想知道怎么做,所以我可以“正确的方式”做到这一点,因为现在代码看起来很愚蠢并且在应用程序底部有1点高度边距。
不要问为什么我试图再次粘贴相同的代码..
解决方案 2
神奇的解决方案是:
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>
如果我本周才知道的话......那么多时间,这么多神经都迷失了......
其他提示
Safari Web内容指南还提到如何禁用CSS中的文本自动调整,这解决了我的问题。
html {
-webkit-text-size-adjust: none; /* Never autoresize text */
}
使用前两个答案,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);
使用UIWebViewDelegate中的webViewDidFinishLoad:
- (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 reload];
我有另一种方法可以通过添加元素来解决它:
<table>
<tr>
<td>
[your html content]
</td>
</tr>
</table>