WebView は HTML 画像サイズを適応的に読み込み、記事は自動的に折り返されます_html/css

WebView は HTML 画像サイズを適応的に読み込み、記事は自動的に折り返されます_html/css_WEB-ITnose

PHP中文网

リリース： 2016-06-24 11:35:53

オリジナル

1649 人が閲覧しました

Webview は多くのアプリで、特にニュースコンテンツなどの記事の形式でデータを読み込むときに使用されます。グラフィックとテキストが混在し、異なるフォント形式で表示されるため、iOS での編集と表示は大きな問題になります (もちろん、CoreText は iOS での描画にも使用できます)。しかし、Web の場合は、リッチテキストエディターで完璧な処理が可能です。この問題の解決策。したがって、バックエンドはフロントエンド分析のために HTML コードを直接返すことが多く、このとき、クライアント側での HTML コードの処理が特に重要になります。

通常は CSS または JS を使用して HTML コードでコンテンツスタイルを設定し、読み込み優先度と読み込み効果に応じて選択できます。

jsはページが読み込まれた後に読み込まれるため、画像スタイルを設定するときに、最初に大きな画像が読み込まれ、その後、
cssが導入されるときに読み込まれ、縮小された画像が表示されます。直接ロードされます (占有される実際のメモリは縮小されません)

1. 画像の調整

1. CSS を使用して画像を調整します

Web フロントエンドで、つまり HTML のみを設定する場合画像の幅、高さは画像の元のサイズに応じて調整されます。

バックグラウンドから返された HTML コードにタグが含まれていない場合は、HTML 文字列の前に次のコードを直接追加できます ( が含まれている場合は、タグの中に追加します)。。このコードの意味は、ユーザーが以前に設定した画像のサイズに関係なく、画像が 320px の幅に拡大縮小されるということです。

<head><style>img{width:320px !important;}</style></head>

ログイン後にコピー

画像の元のサイズを調整する必要がある場合、幅が 320 ピクセル未満の場合は拡大縮小されず、320 ピクセルより大きい場合は 320 ピクセルに縮小され、 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(&#39;script&#39;);"     
"script.type = &#39;text/javascript&#39;;"     
"script.text = \"function ResizeImages() { "         
"var myimg,oldwidth,oldheight;"         
"var maxwidth=320;"// 图片宽度         
"for(i=0;i  maxwidth){"                 
"myimg.width = maxwidth;"             
"}"         
"}"     
"}\";"     
"document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);"];    
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];}

ログイン後にコピー

2.記事内容の自動行折り返し

記事の自動行折り返しもcssで実装されており、記述方法は画像の拡大縮小と似ています。タグがない場合は、次のコードを HTML コードの直前に貼り付けるだけです ( が含まれる場合は、body タグ内にコードを追加します)。つまり、コンテンツ全体が自動的に折り返されます。

<body width=320px style=/"word-wrap:break-word; font-family:Arial/">

ログイン後にコピー

上記は、WebView 読み込み HTML 画像サイズ適応および記事自動行折り返し_html/css_WEB-ITnose の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。