web-dev-qa-db-ja.com

UIWebViewと同じ倍率でレンダリングするためにWKWebViewがコンテンツをスケーリングしないようにします

問題

WKWebViewの代わりにUIWebViewを使用すると、WKWebViewの内容が私のUIWebViewと比較して大幅に縮小されていることに気付きました。私はWKWebViewがそれをやめ、CSSの値を文字通り尊重し、UIWebViewのようにしたいのです。

コンテキスト

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

UIWebViewを使用すると、これらすべてがうまく機能しました。

しかし、ポップオーバーはしばしば非常にコンパクトです。

私が経験していること

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

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

WKWebViewを使用すると、シミュレーターで、本文のサイズを14pxではなく50pxに上げた場合に必要なサイズが表示されます。ただし、このコードはデバイス上では役に立ちません。そのため、CSSサイズを大きくすることもオプションではありません。

UIWebViewの何が問題になっていますか？

まあ、本当に何も。私が経験しているように、それはiOS8では（まだ）非推奨ではなく、おそらくまだ有用です。ただし、WKWebViewは高速であることに気付きました。そして、筆記がUIWebViewの壁にあるという憶測を見てきました。 「今すぐiOS8で最新のAPIを採用してみませんか？」

そのため、私は今のところUIWebViewを使用し続けていますが、CSSのサイズを尊重できるようになったらWKWebViewに切り替えたいと思います。

UIWebViewが適切にレンダリングする元のCSSを次に示しますが、ポップオーバーの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;
}
cssuiwebviewios8wkwebview
63
idStar

同じ問題がありました。私は置くだけでした

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

私のヘッダーブロックにそれは私のためにそれを解決しました。 WKWebViewはUIWebViewよりもMobile Safariのように動作するように見えるため、スケーリングまたは一般的なサイズ変更を制御する場合は、ビューポートを設定する必要があります。

141
Craig Pearlman