Rendering on mobile

[tabdon]

Would love some help figuring out how to adjust the game screen dimensions for mobile. I've looked at the other conversations on the topic but haven't found a solution.

Here's the build of the game using the default Unity HTML file. View this on mobile, and you'll see that the game is adjusted correctly to fill the height and width. Please wait for the game to download (it's on S3 in Singapore).
http://pfx-static.s3-website-ap-southeast-1.amazonaws.com/

Here's the build of the game using react-unity-webgl. Note that it doesn't change it's view correctly.
http://pfx-tennis.s3-website-ap-southeast-1.amazonaws.com/tennis

I tried to implement the devicePixelRatio solution per the docs, but it has no effect. There may be something wrong with those docs as the handleChangePixelRatio const is never used.

Here's my full component (simplified):

const TennisGame = () => {
  const [openWinModal, setOpenWinModal] = useState(false);
  const {unityProvider, sendMessage, addEventListener, removeEventListener} = useUnityContext({
    loaderUrl: "Build/nftennis_webgl.loader.js",
    dataUrl: "Build/nftennis_webgl.data",
    frameworkUrl: "Build/nftennis_webgl.framework.js",
    codeUrl: "Build/nftennis_webgl.wasm",
    streamingAssetsUrl: "StreamingAssets",
  });
  const [devicePixelRatio, setDevicePixelRatio] = useState(
    window.devicePixelRatio
  );

  const handleChangePixelRatio = useCallback(function () {
    const updateDevicePixelRatio = function () {
      setDevicePixelRatio(window.devicePixelRatio);
    };
    const mediaMatcher = window.matchMedia(`screen and (resolution: ${devicePixelRatio}dppx)`);
    mediaMatcher.addEventListener("change", updateDevicePixelRatio);
    return function () {
      mediaMatcher.removeEventListener("change", updateDevicePixelRatio);
    };
  }, [devicePixelRatio]);

  return (
    <GameLayout>
      <div className="w-full h-full">
        <Unity unityProvider={unityProvider}
               devicePixelRatio={devicePixelRatio}/>
        <WinModal openWinModal={openWinModal} setOpenWinModal={setOpenWinModal}/>
      </div>
    </GameLayout>
  )

}

[Magvin]

/ A function which will update the device pixel ratio of the Unity
// Application to match the device pixel ratio of the browser.
const updateDevicePixelRatio = () => setDevicePixelRatio(window.devicePixelRatio)

	// A media matcher which watches for changes in the device pixel ratio.
	const mediaMatcher = window.matchMedia(`screen and (resolution: ${devicePixelRatio}dppx)`)
	
	
	Should be inside useEffect not in useCallback mate