1. ホーム
  2. css

WKWebViewがUIWebViewと同じ倍率でコンテンツをレンダリングするのを抑制する

2023-10-17 20:27:08

質問

問題点

使用方法 WKWebView の代わりに UIWebView の中身が WKWebView の内容が、私の UIWebView . 私は、この WKWebView をやめて、私の CSS の値を文字通りに尊重するようにしたいのです。 UIWebView がそうであるように。

コンテキスト

私は、ネイティブの iOS アプリで、情報コンテンツを表示する iPad のポップオーバー内に表示するコンテンツに Web ビューを使用しています。コンテンツやデザインの担当者にこれを渡して、「リンクされた CSS ファイルを参照しながら、HTML コンテンツをドロップするだけです」と言えるのは素晴らしいことです。

これらすべてが UIWebView .

しかし、ポップオーバーはしばしばかなりコンパクトになります。

私が体験していること

狭いポップオーバーでは、コンテンツが縮小され、まるで私のコンテンツが Web ページ全体に収まるように小さくなっています。WKWebView は主に、iOS で代替ブラウザーを構築したり、WKWebView が本質的に画面を占有するようなハイブリッド アプリを構築したりする人たちを対象としていたことがわかります。

WKWebView の拡大率は、設定できるものではありません。確かに、ユーザーはズームインすることができますが、それは目的に反しています。私は、拡大されたビューポートを探しているのではなく、UIWebView でそうであるように、全体のコンテンツがフィットしてワードラップするのを探しているのです。

WKWebViewでは、シミュレータで、本文のテキストサイズを14pxではなく50pxに上げると、私が望むサイジングが表示されます。しかし、このコードはデバイス上では役に立ちませんので、私の CSS サイズを膨らませることも選択肢にはありません!

UIWebViewの何が問題なのか?

まあ、特にないですね。iOS8で非推奨になったわけではありませんし、おそらく私が経験しているように、まだ有用性があるのでしょう。しかし、私は WKWebView が速いことに気づきました。そして、UIWebViewはもうダメだという意見も見かけました。iOS8でよりモダンなAPIを採用するのはどうなんだろう?

というわけで、今のところUIWebViewを使い続けていますが、CSSのサイジングを尊重してもらえるなら、WKWebViewに乗り換えたいと思っています。

以下は私のオリジナルのCSSで、UIWebViewはうまくレンダリングしますが、ポップオーバーのWKWebViewは本当に小さなフォントでレンダリングします。

body {
    font-family: "HelveticaNeue";
    font-size: 15px;
    line-height: 17px;
    color: #000000;
}

h1 {
    font-family: "HelveticaNeue-Bold";
    font-size: 18px;
    line-height: 20px;
    color: #000000;
}


h2 {
    font-family: "HelveticaNeue-Bold";
    font-size: 16px;
    line-height: 18px;
    color: #000000;
}

どのように解決するのですか?

私も同じような問題を抱えていました。私はちょうど置く必要がありました

<meta name="viewport" content="initial-scale=1.0" />

をヘッダーブロックに追加することで、解決しました。見た目は WKWebView よりも Mobile Safari に近い挙動をするようです。 UIWebView よりもモバイル Safari に近い動作をするので、スケーリングや一般的なサイズ変更を制御したい場合は、ビューポートを設定する必要があります。