ホームページ > 記事 > ウェブフロントエンド > WebView は HTML 画像サイズを適応的に読み込み、記事は自動的に折り返されます_html/css_WEB-ITnose
WebView は HTML 画像サイズを適応的に読み込み、記事は自動的に折り返されます_html/css_WEB-ITnose
- PHP中文网オリジナル
- 2016-06-24 11:35:531619ブラウズ
Webview は多くのアプリで、特にニュース コンテンツなどの記事の形式でデータを読み込むときに使用されます。グラフィックとテキストが混在し、異なるフォント形式で表示されるため、iOS での編集と表示は大きな問題になります (もちろん、CoreText は iOS での描画にも使用できます)。しかし、Web の場合は、リッチ テキスト エディターで完璧な処理が可能です。この問題の解決策。したがって、バックエンドはフロントエンド分析のために HTML コードを直接返すことが多く、このとき、クライアント側での HTML コードの処理が特に重要になります。
通常は CSS または JS を使用して HTML コードでコンテンツ スタイルを設定し、読み込み優先度と読み込み効果に応じて選択できます。
jsはページが読み込まれた後に読み込まれるため、画像スタイルを設定するときに、最初に大きな画像が読み込まれ、その後、
cssが導入されるときに読み込まれ、縮小された画像が表示されます。直接ロードされます (占有される実際のメモリは縮小されません)
1. 画像の調整
1. CSS を使用して画像を調整します
Web フロントエンドで、つまり HTML のみを設定する場合画像の幅、高さは画像の元のサイズに応じて調整されます。
バックグラウンドから返された HTML コードに 93f0f5c25f18dab9d176bd4f6de5d30e タグが含まれていない場合は、HTML 文字列の前に次のコードを直接追加できます (93f0f5c25f18dab9d176bd4f6de5d30e が含まれている場合は、93f0f5c25f18dab9d176bd4f6de5d30e タグの中に追加します)。 。このコードの意味は、ユーザーが以前に設定した画像のサイズに関係なく、画像が 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 コードを実行します。 (次のコードには 93f0f5c25f18dab9d176bd4f6de5d30e タグが必要です)
93f0f5c25f18dab9d176bd4f6de5d30e タグがない場合は、返されたコードの前に 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 を接続するだけで済みます。つまり、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();"];}
2.記事内容の自動行折り返し
記事の自動行折り返しもcssで実装されており、記述方法は画像の拡大縮小と似ています。 6c04bd5ca3fcae76e30b72ad730ca86d タグがない場合は、次のコードを HTML コードの直前に貼り付けるだけです (6c04bd5ca3fcae76e30b72ad730ca86d が含まれる場合は、body タグ内にコードを追加します)。つまり、コンテンツ全体が自動的に折り返されます。
<body width=320px style=/"word-wrap:break-word; font-family:Arial/">
上記は、WebView 読み込み HTML 画像サイズ適応および記事自動行折り返し_html/css_WEB-ITnose の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。