使用移动浏览器（Unity webgl）时如何强制横向模式？

Question

我正在开发一个统一的 webgl 项目。
我想让它在移动环境中运行时保持横向模式。
我确实尝试了一些代码，但它们无法在 Android 和 IOS 上运行。
有谁能救我脱离这一切？

我做了这样的事情。

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

Answer 1

你可以试试这样的：

lockAllowed = window.screen.lockOrientation(orientation);

您可以在此处找到更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

在 chrome 上这样的东西应该可以工作

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')
}

基本上你只需要指定你需要的方向（在你的情况下是风景）。 这是一个我不确定是否适用于移动设备的解决方案。

所以对于移动设备，您也可以尝试创建 manifest.json

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

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

唯一的统一解决方案可以是仅根据屏幕的 x 和 y 旋转所有内容（通过使用画布 rect），以便您可以在 x > y 时旋转并在更改时再次旋转（用户应该只看到横向这样）。

Answer 2

对于那些有相同问题的人，我将添加我自己的答案。

对于 Android，是的，您可以将其锁定为特定方向。
对于 Ios，不，你不能。

Aseets/plugins/webgl/MyPlugin.jslib

var MyPlugin = {
    IsMobile: function()
     {
         return UnityLoader.SystemInfo.mobile;
     },

    GoFullscreen: function()
    {

        var viewFullScreen = document.getElementById('#canvas');

        var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;

        var ActivateFullscreen = function()
        {
            if(orientation == "landscape-primary"){
                if (viewFullScreen.requestFullscreen) /* API spec */
                {  
                    viewFullScreen.requestFullscreen();
                    screen.orientation.lock("landscape-primary");
                }
                else if (viewFullScreen.mozRequestFullScreen) /* Firefox */
                {
                    viewFullScreen.mozRequestFullScreen();
                    screen.mozLockOrientation.lock("landscape-primary");
                }
                else if (viewFullScreen.webkitRequestFullscreen) /* Chrome, Safari and Opera */
                {  
                    viewFullScreen.webkitRequestFullscreen();
                    screen.orientation.lock("landscape-primary");
                }
                else if (viewFullScreen.msRequestFullscreen) /* IE/Edge */
                {  
                    viewFullScreen.msRequestFullscreen();
                    screen.msLockOrientation.lock("landscape-primary");
                }
                viewFullScreen.removeEventListener('touchend', ActivateFullscreen);    
            }
        }
        viewFullScreen.addEventListener('touchend', ActivateFullscreen, false);
    },

    CheckOrientation: function(){
        var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;

        if(orientation == "landscape-primary")
        {
            return true;
        }
        else
        {
            return false;
        }
    },
};

mergeInto(LibraryManager.library, MyPlugin);  

Unity C#脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Runtime.InteropServices;

public class test : MonoBehaviour
{
    public bool isLand;

    [DllImport("__Internal")]
    private static extern void GoFullscreen();

    [DllImport("__Internal")]
    private static extern bool IsMobile();

    [DllImport("__Internal")]
    private static extern bool CheckOrientation();


    //Whether your webgl is being playing on mobile devices or not.
    public bool isMobile()
    {
        #if !UNITY_EDITOR && UNITY_WEBGL
             return IsMobile();
        #endif
        return false;
    }

    //Activate Fullscreen.
    public static void ActivateFullscreen()
    {
        #if !UNITY_EDITOR && UNITY_WEBGL
            GoFullscreen();
        #endif
    }

    //Check current orientation.
    public bool isLandScape()
    {
        #if !UNITY_EDITOR && UNITY_WEBGL
             return CheckOrientation();
        #endif
        return false;
    }

    //When your fullscreen button is clicked(touched).
    public void OnPointerClick()
    {
        //If you're using mobile devices.
        if (isMobile())
        {
            if (SystemInfo.operatingSystem.Contains("iOS"))
            {
                //Do Something.
            }
            else if (SystemInfo.operatingSystem.Contains("Android"))
            {
                if (isLand)
                {
                    //If Android and current Orientation is landscape-primary, Activate Fullscreen.
                    ActivateFullscreen();
                }
            }
        }
    }

    void Update()
    {
        //Keep on checking the orientation.
        if (isMobile())
        {
            if (isLandScape())
            {
                isLand = true;
            }
            else if (!isLandScape())
            {
                isLand = false;
            }
        }
    }
}

嗯，我想你会明白的。