Androidの4系端末でwebview内の文字が寄る話


webviewで表示したHTMLの文字が左端に寄るバグ

開発中にテスターさんから、「WebViewの文字が左に寄るんですが・・・」と言われる。
みると確かに画像やレイアウトの配置に問題はないのに、文字だけがきっかり途中から改行されて左に寄っている。(写真は持ってこれないので想像してください。)
発生していたのはAndroid4.2の端末。
他の機種でためしたところ、Nexus5などOSが新しいものでは起こらない。
webviewでOSバージョンによる差が出るとなると、webviewのベースの違いだなと思うはず。

4.3まではwebkitベース、4.4以上はchromiumベース

http://k-tai.watch.impress.co.jp/docs/column/keyword/685512.html
こちらにも書かれている通り、webviewのベースがOSのバージョンによって違うことがわかる。
つまりバグが発生しているのはwebkitベースのもの。

標準ブラウザとchromeで検証

昔のAndroid端末には入っている標準ブラウザ(地球儀アイコン)はwebkitベース、最近だとこれはなくなってChromeが入ってるはず。
それぞれのブラウザで表示したら、標準ブラウザは左に寄る、Chromeなら正常に表示されるのでは?
と思いそれぞれ見たところビンゴ。
他にもサイトなどみたところ、標準ブラウザのデフォルト設定であるページの自動調整が問題と発覚。
http://cityjumperweb.com/2014/03/06/android-browzers/

こちらに記載のとおりに自動調整を外すとChromeと同じように表示された。

これをwebviewに設定する

標準ブラウザ内でも設定できているし、なんとかwebviewの設定でもできるはず、と思いdeveloperを調べる。
いろんなサイトやstackoverflow見るのもいいけど、ロシアの天才も言ってるしやっぱソースは正しいところを見るべきだよね。
http://qiita.com/jacksuzuki/items/b2fa6b44962e73a53d08

webviewの設定なので、javascript有効にするとかと同じだなーと予想してそのあたりを探す。
レイアウトや文字サイズ関連だよなあと思って見つけたのが次のメソッド。
https://developer.android.com/reference/android/webkit/WebSettings.html#setLayoutAlgorithm(android.webkit.WebSettings.LayoutAlgorithm)

簡単には、「基本的なwebviewのレイアウトを設定している」感じらしい。
実際にWebSettings.LayoutAlgorithmってどんなのかさらに下ってみると、デフォルトに設定してある「NARROW_COLUMNS」という値はすでに非推奨かつKitKat(4.4)より前のものでしか使えないとある。
あやしい!!
https://developer.android.com/reference/android/webkit/WebSettings.LayoutAlgorithm.html

上記のページにもあるように、いろんな機種に対応するには「NORMAL」設定がいいよ、とのことなので実際にNORMALを設定したところ、見事解消された。


WebView webview = new WebView(this);
        webview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);

がんばって解消したものの、サイト側で治しましょうとなってこのコードは使われなくなってしまった(´・ω・`)
頑張ろう。