[SOLVED] When using AR.js on mobile the camera zooms too much

When using AR.js on mobile the camera zooms too much

This is the code I'm using.

When I try to load this file from my mobile, the camera zooms too much.

It is like when I tried to show an image on laptop screen, the camera zooms too much so that I cannot properly show the correct image so that the image can be identified by NFT marker

  <body style="margin : 0px; overflow: hidden;">
     <a-scene
      vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">


      <a-nft
        registerevents
        type="nft"
        url="/custom/generic/assests/nft/vc/vc"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5">

            <a-text id="click_to_play_txt" position="17.06761 44.59457 5.43027" scale="20 20 1" text="color: #000" value="Click to play Video"></a-text>
        </a-nft>
        <a-entity camera></a-entity>
  </a-scene>
</body>
</body>
</html>

Solution

In my experience of the problem "the camera zooms too much", it is because of the browser settings

In my case: Google Chrome Mobile > Settings > Accessibility. Uncheck Force Enable Zoom and the Text Scaling is <= 100%