How to force landscape mode when using mobile browser (Unity webgl)?

I'm working on a unity webgl project.
and i want to make it keep on landscape mode when it runs on a mobile environment.
i did try few codes but they were not working on both Android and IOS.
Is there anyone who can save me from this?

I did something like this.

<script>
    if(UnityLoader.SystemInfo.mobile == true){
        ScreenOrientation.lock('landscape');
    }
</script>

You can try with something like this:

lockAllowed = window.screen.lockOrientation(orientation);

You can find more information here: https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

on chrome something like this should work

var lockFunction =  window.screen.orientation.lock;
if (lockFunction.call(window.screen.orientation, 'landscape')) {
           console.log('Orientation locked')
} else {
            console.error('There was a problem in locking the orientation')
}

basically you only need to specify what orientation you need (landscape in your case). This is a solution that I'm not sure will work on mobile.

So for mobile you can also try to create a manifest.json

<link rel="manifest" href="http://yoursite.com/manifest.json">

{
   "name":"A nice title for your web app",
   "display":"standalone",
   "orientation":"landscape"
}

A unity only solution can be to just rotate everything based on the x and y of the screen (by using canvas rect) so that you can rotate when x > y and rotate again when that change (the user should only see landscape this way).