Android ChromeでAR.jsの表示が崩れる問題対処法

23日からの展示に向け、AR.jsで諸々実装していたのですが、Androidで見ると表示が崩れるという問題に遭遇して青ざめていました。
AR.jsのAndroid Chromeでの表示不具合
なんか小さくない????


結論から言って、Androidに個体差があり、完全に解消できたわけではないのですが、見た目がぐちゃぐちゃでAndroidでは閲覧不可…という状態からは脱したので、その方法をまとめておきます。

対処法

1)Viewportの設定を変える


initial-scaleで初期表示のサイズを設定しておきます。
target-densityDpiで画面の表示解像度を設定します。
…が、これでもAndoridによっては、画面を縦にすると表示が崩れて横にするとうまくいくとか、Webcamのアスペクト比が微妙におかしい…ということがあり、ちょっと惜しい感じでした。

2)Firefoxを使う

これが一番無難でした。動画再生時の画質が多少落ちるのですが、サイズや表示位置などが安定します。


まとめ

もう少し多様なAndorid端末での動作確認が必要そうですが、展示会ではAndoridユーザーはFirefox推奨、Chromeだと表示崩れの可能性ありというので出そうかなと思います。
しかしAndoridの個体差、しんどい…