web-dev-qa-db-ja.com

UIWebViewは回転後にテキストのサイズを変更します：魔法のバグや私の愚かさの説明を探しています

だから私は私のアプリケーションにUIWebViewを持っていて、それにいくつかのhtml（記事）をロードし、いくつかのCSSを入れてすべてをより良くします。これは単純明快で、横向きの機能で読み上げを追加しようとするまではすべて完璧です。その後、UIWebViewはHTMLに入力したcssの「フォントサイズ」を無視し、横向きモードに回転した後、フォントサイズを大幅に大きくします。

私はそれを修正するために約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を再度実行しました（いいえ、setFrameの1つのセットだけでサイズ変更を修正しません）。

それが機能することを嬉しく思いますが、コードが愚かに見え、アプリケーションの下部に1ポイントの高さのマージンがあるため、「正しい方法」で実行できる方法と理由を知りたいと思います。

また、同じコードをコピーして貼り付けようとした理由を聞かないでください。

iphonecocoa-touchuiwebviewwebkit
38
sniurkst

そして、魔法の解決策は次のとおりです。

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

今週前に知っていれば..たくさんの時間、たくさんの神経が失われました..

28
sniurkst

Safari Webコンテンツガイド は、CSSでテキストの自動サイズ変更を無効にする方法についても説明しています。これにより、私の場合の問題は解決しました。

html {
    -webkit-text-size-adjust: none; /* Never autoresize text */
}
117
Bjørn Olav Ruud

最初の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];

}
13
pablobart

あなたはおそらくこれを読む必要があります

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

同様に、ビューポートの幅のみを指定すると、高さと初期スケールが推測されます。図3-15は、ビューポートの幅が320に設定されている場合の同じWebページのレンダリングを示しています。縦向きは図3-14と同じようにレンダリングされますが、横向きは320ピクセルの幅を維持します。 初期スケールを変更し、ユーザーが横向きに変更するとズームインする効果があります。

5
Azeem.Butt

私はあなたのケースを試しましたが、運がありませんでした。

私のために働いた解決策は次のとおりでした：

[webViewリロード];

2
sashaeve

要素を追加して解決する別の方法があります：

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