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

Posted 2023-05-06

【中文标题】使用移动浏览器（Unity webgl）时如何强制横向模式？

【英文标题】：How to force landscape mode when using mobile browser (Unity webgl)?

【发布时间】：2020-06-15 11:25:19

【问题描述】：

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

我做了这样的事情。

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

【问题讨论】：

iOS Safari 没有屏幕方向 API，因此至少从 iOS 13 开始，不可能在 iOS 上锁定方向

@gman 好的。我刚刚弹出警报让用户手动设置它。

还有其他解决方案。您可以使用 CSS 根据屏幕是横向还是纵向来旋转内容。您还可以使用 CSS 自动显示或隐藏警告。不幸的是，许多人将手机锁定为纵向模式，而原生应用程序可以强制横向显示网页却不能，至少在 iOS 上是这样

【参考方案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 时旋转并在更改时再次旋转（用户应该只看到横向这样）。

【讨论】：

iOS Safari 没有屏幕方向 API

【参考方案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;
            
        
    

嗯，我想你会明白的。