UIWebViewは回転後にテキストのサイズを変更します:魔法のバグまたは私の愚かさの説明を探しています
-
06-07-2019 - |
質問
したがって、アプリケーションに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)];
ご覧のとおり、同じコードをもう一度追加しただけで、マージンが1ポイント増えました。また、setFrameを再度実行しました(いいえ、1セットのsetFramesだけではサイズ変更は修正されません)。
機能しているのはうれしいですが、HOWとWHYを知りたいので、「正しい方法」でそれを行うことができます。コードが愚かに見え、アプリケーションの下部に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 */
}
最初の2つの答えを使用して、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コードを使用して、既存のWebサイトに両方を挿入できました:
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>