WebViewロードHTML画像サイズ適応と文章自動改行
1800 ワード
HTMLコードにコンテンツスタイルを設定し、一般的にcssまたはjsを使用すると、ロードの優先度やロード効果に応じて、自分で選択できます. jsはページのロードが完了した後にロードされるので、画像スタイルを設定するときは、まず大きな図をロードし、突然小さくなります. cssは導入時にロードされ、縮小したピクチャを直接ロードする(実際の占有メモリは縮小しない); 一、画像適応
1.cssによる画像の適応
Webフロントエンド、つまりHTMLでは、画像の幅だけを設定すると、画像の元のサイズに応じて高さがスケールされます.
バックグラウンドで返されるHTMLコードにタグが含まれていない場合は、HTML文字列の前に直接次のコードを付けることができます(が含まれている場合はタグの内部に追加します).コードは、ユーザーが以前設定したピクチャサイズがどんなに大きくても、幅320 pxサイズに縮小することを意味します.
画像の元のサイズに応じて、幅が320 px未満のズームなし、320 px以上のズームを320 pxにする必要がある場合は、HTML文字列の前にコードを追加します.
2.jsを用いた画像の適応
Webviewのエージェントでjsコードを実行します.(次のコードにはラベルが必要です)
タグがなければ簡単ですが、返されたHTML文字列の前にをつなぎ合わせるだけです.
二、文章の内容を自動的に改行する
文章の自動改行もcssで実現され、書き方は画像のスケールが似ている.タグがない場合は、HTMLコードの前に、以下のコードを直接つなぎ合わせればよい(が含まれている場合はbodyタグの内部にコードを追加する)、すべての内容が自動的に改行されることを意味します.
1.cssによる画像の適応
Webフロントエンド、つまりHTMLでは、画像の幅だけを設定すると、画像の元のサイズに応じて高さがスケールされます.
バックグラウンドで返されるHTMLコードにタグが含まれていない場合は、HTML文字列の前に直接次のコードを付けることができます(が含まれている場合はタグの内部に追加します).コードは、ユーザーが以前設定したピクチャサイズがどんなに大きくても、幅320 pxサイズに縮小することを意味します.
画像の元のサイズに応じて、幅が320 px未満のズームなし、320 px以上のズームを320 pxにする必要がある場合は、HTML文字列の前にコードを追加します.
<head><style>img{max-width:320px !important;}</style></head>2.jsを用いた画像の適応
Webviewのエージェントでjsコードを実行します.(次のコードにはラベルが必要です)
タグがなければ簡単ですが、返されたHTML文字列の前にをつなぎ合わせるだけです.
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
[webView stringByEvaluatingJavaScriptFromString: @"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function ResizeImages() { "
"var myimg,oldwidth,oldheight;"
"var maxwidth=320;"//
"for(i=0;i maxwidth){"
"myimg.width = maxwidth;"
"}"
"}"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
}二、文章の内容を自動的に改行する
文章の自動改行もcssで実現され、書き方は画像のスケールが似ている.タグがない場合は、HTMLコードの前に、以下のコードを直接つなぎ合わせればよい(が含まれている場合はbodyタグの内部にコードを追加する)、すべての内容が自動的に改行されることを意味します.
<body width=320px style=\"word-wrap:break-word; font-family:Arial\">