WebARの表示でandroidスマホだとカメラにズームが掛かって固定され、正しく表示されない

前提・実現したいこと

オリジナルマーカーを使用したAR年賀状を作成したいと思っています。
A-frameとAR.jsを使用して、オリジナルマーカーで3Dモデルを表示･回転させるものを作成しました。
iPhone(safari、Google chrome)、WindowsPC(Google chrome)では問題なく表示･回転出来ています。

発生している問題

androidスマホから読み込みを行うと、カメラに拡大(ズーム)が掛かったまま固定になってしまい、
ピントも合わないせいで、ARマーカーを認識できず、3Dも表示されません。

ARマーカーはオリジナルのもので、QRコードと合体させたものです。
iPhone、WindowsPCだと特に問題なく動くのに、androidになった途端に
カメラの挙動がおかしくなる理由が分からず、特にエラーコード等も出ないので困っております。

ネットで拾った情報を継ぎ接ぎしながら作成している為、おかしな部分があるかもしれません。
詳しい方いらっしゃったら、お知恵をお貸しください。

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Happy New Year!</title>
  </head>
  <body style="margin:0px; overflow:hidden;">
    <!-- A-Frame ライブラリの読み込み -->
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    <!-- AR.js ライブラリの読み込み -->
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
 
    <!-- A-Frame の VR空間に AR.js を紐づける（デバッグUI、A-FrameのVRボタンは非表示） -->   
    <a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">

    <!-- ここが表示させるものの指定 -->    
        <a-assets>
        <a-asset-item id="tora01-obj" src="model_obj/nenga01/tora01.obj"></a-asset-item>
        <a-asset-item id="tora01-mtl" src="model_obj/nenga01/tora01.mtl"></a-asset-item>      
        </a-assets>
 
    <!-- オリジナルのマーカーここ -->    
        <a-marker preset="custom" type="pattern" url='./pattern-QR_933564.patt'>

    <!-- 表示されるものの挙動 -->    
          <a-obj-model
            src="#tora01-obj"
            mtl="#tora01-mtl"
            scale="0.2 0.2 0.2"
            position="0 0.5 0">
            <a-animation
              attribute="rotation"
              to="0 360 0"
              dur="12000"
              easing="linear"
              repeat="indefinite">
            </a-animation>
          </a-obj-model>
 
        </a-marker>

     <!-- カメラ -->    
        <a-entity camera></a-entity>
 
    </a-scene>
  </body>
</html>

試したこと

A-Frame ライブラリの部分を最新まで変更したりもしましたが、
回転しなくなっただけで、カメラの問題は解決しませんでした。

行動規範の内容に同意します

回答1件

自己解決

自己解決しました

5行目の

    <meta name="viewport" content="width=device-width,initial-scale=1">

を

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />

に変更した所、androidでもカメラが強制ズームにならずに綺麗に表示されました。

投稿2021/12/17 01:45

-syo

総合スコア4