CSS を使用して WebView での HTML レンダリングをカスタマイズするにはどうすればよいですか?

CSS を使用した WebView での HTML レンダリングのカスタマイズ

この取り組みの目的は、HTML コンテンツを CSS 内でレンダリングすることでユーザー エクスペリエンスを向上させることです。 WebView にカスタム CSS を適用してモバイル フレンドリー性を最適化します。

これを実現するには、オプションは 2 つあり、前処理中に HTML にカスタム スタイルを挿入するか、アプリのアセットから別の CSS ファイルを参照するかの 2 つです。後者のアプローチの方が望ましいですが、WebView の機能をより深く理解する必要があります。

CSS 参照に WebView.loadDataWithBaseURL を利用する

アセットから CSS ファイルを組み込むにはHTML レンダリング プロセスに組み込むと、WebView のloadDataWithBaseURL メソッドを利用できます。このメソッドを使用すると、WebView のベース URL を指定して、ローカル アセットにアクセスできるようになります。

コード スニペットの例を次に示します。

htmlData = "<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; />" + htmlData;
// assuming you have /assets/style.css
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);

ベース URL を指定すると、「ファイル: ///android_asset/" を指定し、HTML データ内に HTML および CSS 参照を含めると、WebView は指定されたアセットから CSS ファイルをロードするように指示されます。

その他の考慮事項

アセット フォルダーから直接ロードされた HTML コンテンツを表示している場合は、WebView のベース URL を指定する必要がないことに注意してください。 WebView は、アセット ディレクトリ内の HTML および関連する CSS ファイルに自動的にアクセスします。

以上がCSS を使用して WebView での HTML レンダリングをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。