WebView は HTML 画像サイズを適応的に読み込み、記事は自動的に折り返されます_html/css_WEB-ITnose
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('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で実装されており、記述方法は画像の拡大縮小と似ています。
タグがない場合は、次のコードを HTML コードの直前に貼り付けるだけです ( が含まれる場合は、body タグ内にコードを追加します)。つまり、コンテンツ全体が自動的に折り返されます。<body width=320px style=/"word-wrap:break-word; font-family:Arial/">
上記は、WebView 読み込み HTML 画像サイズ適応および記事自動行折り返し_html/css_WEB-ITnose の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7509
15
1378
52
78
11
19
61
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
