在iOS应用程序中，控制器未点击屏幕右侧_Ios_Unity3d_Airconsole

在iOS应用程序中，控制器未点击屏幕右侧

ios unity3d

在iOS应用程序中，控制器未点击屏幕右侧,ios,unity3d,airconsole,Ios,Unity3d,Airconsole,我为我的AirConsole应用程序创建了一个简单的controller.html。其内容如下： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta content='width=device-width, initial-scale=1, maxi

我为我的AirConsole应用程序创建了一个简单的

controller.html

。其内容如下：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta content='width=device-width, initial-scale=1, maximum-scale=1 user-scalable=0' name='viewport'>
        <title>AirConsole Controller</title>
        <link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
        <!-- 3rd Party Libs -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <!-- AIRCONSOLE -->
        <script type="text/javascript" src="https://www.airconsole.com/api/airconsole-latest.js"></script>
        <script type="text/javascript" src="controller/libs/airconsole_view_manager.js"></script>
        <script>
            var airConsole = null;
            var viewManager = null;
            var deviceId = null;
            var isReady = false;
            var isLoadingActive = true;
            /**
              * Sets up the communication to the screen.
              */
            function init() {
                airConsole = new AirConsole ( { orientation: AirConsole.ORIENTATION_LANDSCAPE } );
                airConsole.onMessage = function ( from, data ) {
                    if ( data.action == "REMOVE_LOADING" ) {
                        if ( isLoadingActive ) {
                            isLoadingActive = false;
                            showScreen ( "Ready" );
                        }
                    } else if (data.action == "SHOW_READY_SCREEN") {
                        showScreen ( "Ready" );
                    } else if ( data.action == "READY_RECEIVED") {
                        deviceId = data.info.deviceId;
                        showScreen ( "DoneReady" );
                    } else if ( data.action == "GAME_STARTED" ) {
                        showScreen ( "Waiting" );
                    } else if ( data.action == "START_GAME" ) {
                        showScreen ( "Controls" );
                    } else if (data.action == "GAME_END") {
                        showScreen ( "PerformEndGame" );
                    } else {
                        alert ( "Message: " + data.info.deviceId );
                    }
                }

                airConsole.onActivePlayersChange = function ( player_number ) {
                    // alert ( "Active Players Change" );
                } 

                airConsole.onReady = function () {
                    // alert ( "On Ready" );
                    viewManager = new AirConsoleViewManager ( airConsole );
                }

                // Listen for view changes
                airConsole.onCustomDeviceStateChange = function ( deviceId, data ) {
                    viewManager.onViewChange ( data, function ( view_id ) {
                        // view has changed
                        alert ( "VIEW MANAGER WORKING" );
                    } ); 
                };

                airConsole.onConnect = function ( id ) {
                    //alert ( "Device ID RECEIVED: " + id );
                    isReady = false;
                }

                airConsole.onGameEnd = function () {
                    alert ( "On Game End" );
                }
            }
        </script>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px auto;
            }

            html, body {
                -ms-user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select: none;
                height: 100%;
                overflow: hidden;
            }

            #controller-container {
                background-color: #ff0000;
                text-align: center;
                font-family: sans-serif;                
                width: 100%;
                height: 100vh;
                position: relative;
            }

            .container_div {
                position: relative;
                display: flex;
                background-color: #ff0000;
                width: calc(100% -10px);
                height: calc(100% -10px);
                padding: 5px;
            }           

            .inner_div{
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
                height: calc(100vh - 10px);
                background-color: green;
            }

            .controls_div {
                padding: 5px;
                display: flex;
                flex-direction: row;
            }

            .button_div {
                width: calc(50% - 5px);
                float: left;
            }

            .right_button{
                float: right;
            }

            .control {
                flex: 1;
                justify-content: center;
                align-items: center;
                height: calc( 100vh - 10px );
                background-color: cadetblue;
                float: left;
            }

            .hidden_initially {
                display: none;
            }

            .btn {
                position: absolute;
                width: 100%;
                height: 100%;
            }

            .btn_left {
                width: 40%;
                left: 2%;
            }

            .btn_right {
                width: 40%;
                right: 2%;
            }

            .center_align {
                text-align: center;
            }
        </style>
    </head>
    <body onload="init()">
        <div id="controller-container">
            <!-- CREATED BY ME -->
            <div id="loading_container_id_div" class="container_div">
                <div class="inner_div">LOADING</div>
            </div>
            <div id="ready_container_id_div" class="container_div view hidden_initially" onmousedown="sendReadyMessage ( 'READY' )">
                <div class="inner_div">TAP TO READY</div>
            </div>
            <div id="done_ready_container_id_div" class="container_div hidden_initially">
                <div class="inner_div">GAME is ABOUT to START</div>
            </div>
            <div id="controls_container_id_div" class="container_div controls_div hidden_initially">
                <div id="jump" class="inner_div button_div" onmousedown="sendMessage ( 'JUMP' )">JUMP</div>
                <div id="dash" class="inner_div button_div right_button" onmousedown="sendMessage ( 'DASH' )">DASH</div>
            </div>
            <div id="waiting_container_id_div" class="container_div hidden_initially" onmousedown="alert ( 'BINGO' )">
                <div class="inner_div">WAITING for Game to END</div>
            </div>
        </div>
        <script>            
            var controlsContainer = document.getElementById ( "controls_container_id_div" );
            var doneReadyContainer = document.getElementById ( "done_ready_container_id_div" );
            var loadingContainer = document.getElementById ( "loading_container_id_div" );
            var readyContainer = document.getElementById ( "ready_container_id_div" );
            var waitingContainer = document.getElementById ( "waiting_container_id_div" );

            function sendReadyMessage ( action ) {                
                airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
            }

            function sendMessage ( action ) {
                airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
            }

            function hideScreens () {
                controlsContainer.style.display = "none";
                doneReadyContainer.style.display = "none";
                loadingContainer.style.display = "none";
                readyContainer.style.display = "none";
                waitingContainer.style.display = "none";
            } 

            function showScreen ( screen ) {
                hideScreens ();
                switch ( screen ) {
                    case "Waiting":
                        waitingContainer.style.display = "block";
                        break;
                    case "Controls":
                        controlsContainer.style.display = "block";
                        break;
                    case "Ready":
                        readyContainer.style.display = "block";
                        break;
                    case "DoneReady":
                        doneReadyContainer.style.display = "block";
                        break;
                    case "PerformEndGame":
                        waitingContainer.style.display = "block";
                        break;
                }
            }
        </script>
    </body>
</html>

屏幕截图：

在

iOS

AirConsole应用程序上播放时，虽然同一部分无法纯粹检测到“onmousedown”事件，但工作正常。看起来点击事件基本上发生在靠近屏幕中心的区域，而该区域的其余部分无法检测到任何用户交互
为什么只有iOS AirConsole应用程序显示这种异常行为？要使两个按钮都单击，我可以做什么
这是我的
CSS
或
html
内容中的一些缺陷。请引导我朝正确的方向走

这是在AirConsole上的，我没有iOS手机来测试，但从我所能看出，你使用它似乎很奇怪

.inner_div { width: 100%; }
。。。其中.internal_div用于“跳跃”和“破折号”按钮，但您也可以使用

.button_div { width: calc(50% - 5px); float: left; }
那么为什么对于相同的DIV元素有两个不同的宽度值呢
另外，我可能会做一些不同的事情来减少代码量，使事情变得更简单。如果你感兴趣，我可以举个例子
不过，我希望这对您有所帮助。
这是我创建的“controller.html”，目的是在整个窗口中点击iOS AirConsole应用程序

空中控制台控制器 var airConsole=null； var viewManager=null； var deviceId=null； var characterName=null； /** *设置与屏幕的通信。 */ 函数init（）{ airConsole=新的airConsole（{orientation:airConsole.orientation\u-LANDSCAPE}）； airConsole.onMessage=函数（从，数据）{ 如果（data.action==“删除加载”）{ 显示屏幕（“就绪”）； }else if（data.action==“显示就绪屏幕”）{ 显示屏幕（“就绪”）； }else if（data.action==“已接收就绪”）{ deviceId=data.info.deviceId； characterName=data.info.characterString； var imageId=document.getElementById（“图像_id”）； imageId.src=“images/character/”+characterName+“.png”； imageId.alt=字符名；显示屏（“DoneReady”）； }else if（data.action==“游戏开始”）{ 显示屏幕（“等待”）； }else if（data.action==“开始游戏”）{ 显示屏幕（“控制”）； }else if（data.action==“游戏结束”）{ showScreen（“表演游戏”）； }否则{ 警报（“消息：+data.info.deviceId”）； } } airConsole.onActivePlayersChange=功能（播放器编号）{ //警惕（“活跃玩家变更”）； } airConsole.onReady=函数（）{ //警报（“准备就绪”）； } airConsole.onConnect=功能（id）{ //警报（“接收到设备ID:+ID”）； } airConsole.onGameEnd=函数（）{ 警报（“游戏结束时”）； } } 正文{margin:0px；padding:0px；} #控制器容器{ 背景色：#00ff00；文本对齐：居中；字体系列：无衬线；宽度：100%；高度：100vh；位置：相对位置； } .图片组{ 指针事件：无；位置：绝对位置； z指数：99；最高：5%；宽度：50vh；左：0；右：0；边距：0自动； } .image_div img{宽度：100%；} 宾尤分区{ z指数：0； } .message_div{ 边框：2件白色；背景色：淡蓝色； } .btn一半{ 文本对齐：居中；背景颜色：绿色； /*背景图片：url（“images/background/yellow_square.gif”）*/ 背景尺寸：包含；颜色：#000000；显示：内联块；宽度：49%；边框：4倍纯白；高度：98vh； z指数：1；位置：相对位置； } 加载。。。点击准备就绪游戏将在几秒钟后开始，请稍候跳跃猛冲 .button_div { width: calc(50% - 5px); float: left; } <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta content='width=device-width, initial-scale=1, maximum-scale=1 user-scalable=0' name='viewport'> <title>AirConsole Controller</title> <link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>  <link rel="stylesheet" type="text/css" href="airconsole-controls/button/button.css"> <link rel="stylesheet" type="text/css" href="airconsole-controls/dpad/dpad.css">  <link rel="stylesheet" type="text/css" href="controller/styles/styles.css"> <link rel="stylesheet" type="text/css" href="controller/styles/controls.css">  <script type="text/javascript" src="https://www.airconsole.com/api/airconsole-latest.js"></script> <script type="text/javascript" src="controller/libs/airconsole_view_manager.js"></script>  <script type="text/javascript" src="airconsole-controls/button/button.js"></script> <script type="text/javascript" src="airconsole-controls/dpad/dpad.js"></script> <script type="text/javascript" src="airconsole-controls/swipe-analog/swipe-analog.js"></script> <script type="text/javascript" src="airconsole-controls/swipe-digital/swipe-digital.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript" src="controller/libs/handlebars-v4.0.5.js"></script>  <script type="text/javascript" src="controller/js/controller_generator.js"></script> <script type="text/javascript" src="controller/js/main.js"></script> <script> var airConsole = null; var viewManager = null; var deviceId = null; var characterName = null; /** * Sets up the communication to the screen. */ function init() { airConsole = new AirConsole ( { orientation: AirConsole.ORIENTATION_LANDSCAPE } ); airConsole.onMessage = function ( from, data ) { if ( data.action == "REMOVE_LOADING" ) { showScreen ( "Ready" ); } else if ( data.action == "SHOW_READY_SCREEN" ) { showScreen ( "Ready" ); } else if ( data.action == "READY_RECEIVED" ) { deviceId = data.info.deviceId; characterName = data.info.characterString; var imageId = document.getElementById ( "image_id" ); imageId.src = "images/character/" + characterName + ".png"; imageId.alt = characterName; showScreen ( "DoneReady" ); } else if ( data.action == "GAME_STARTED" ) { showScreen ( "Waiting" ); } else if ( data.action == "START_GAME" ) { showScreen ( "Controls" ); } else if (data.action == "GAME_END") { showScreen ( "PerformEndGame" ); } else { alert ( "Message: " + data.info.deviceId ); } } airConsole.onActivePlayersChange = function ( player_number ) { // alert ( "Active Players Change" ); } airConsole.onReady = function () { // alert ( "On Ready" ); } airConsole.onConnect = function ( id ) { //alert ( "Device ID RECEIVED: " + id ); } airConsole.onGameEnd = function () { alert ( "On Game End" ); } } </script> <style> body{margin:0px;padding:0px;} #controller-container { background-color: #00ff00; text-align: center; font-family: sans-serif; width:100%; height: 100vh; position: relative; } .image_div { pointer-events: none; position: absolute; z-index:99; top:5%; width:50vh; left: 0;right: 0;margin: 0 auto; } .image_div img{width: 100%;} .bin_div { z-index:0; } .message_div { border: 2px outset white; background-color: dodgerblue; } .btn-half { text-align: center; background-color: green; /* background-image: url( "images/background/yellow_square.gif" );*/ background-size: contain; color: #000000; display:inline-block; width:49%; border: 4px solid white; height: 98vh; z-index: 1; position: relative; } </style> </head> <body onload="init()"> <div id="controller-container">  <div id="view-0" class="view" style="display: flex;"> <div id="view-0-section-0" class="section" style="height: 100%;"> <div id="loading_container_id" class="btn button-element element message_div"> <div class="button-text">Loading...</div> </div> </div> </div> <div id="view-3" class="view" style="display: none;"> <div id="view-3-section-0" class="section" style="height: 100%;"> <div id="ready_container_id" class="btn button-element element message_div"> <div class="button-text">TAP to READY</div> </div> </div> </div> <div id="view-4" class="view" style="display: none;"> <div id="view-4-section-0" class="section" style="height: 100%;"> <div id="done_ready_container_id" class="btn button-element element message_div"> <div class="button-text">Game will Start in few seconds, HOLD ON</div> </div> </div> </div> <div id="view-5" class="view" style="display: none;"> <div id="view-5-section-0" class="section horizontal" style="height: 100%;position: relative;"> <div id="jump_id" class="btn button-element element btn-half btn_div"> <div class="button-text">JUMP</div> </div> <div id="dash_id" class="btn button-element element btn-half btn_div"> <div class="button-text">DASH</div> </div> <div id="image_container_id" class="btn button-element element image_div"> <img id="image_id"> </div> </div> </div> <div id="view-6" class="view" style="display: none;"> <div id="view-6-section-0" class="section" style="height: 100%;"> <div id="waiting_container_id" class="btn button-element element message_div"> <div class="button-text">Waiting for Game to End...</div> </div> </div> </div> <script type="text/javascript"> var ctrl_data = '{"orientation":"landscape","selected_view_id":"view-0","views":[{"id":"view-0","sections":[{"id":"view-0-section-0","elements":[{"id":"loading_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-0-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Loading...","send_onrelease":false,"message_data":[]}}],"classes":[]}]},{"id":"view-3","sections":[{"id":"view-3-section-0","elements":[{"id":"ready_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-3-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"TAP to READY","send_onrelease":false,"message_data":[{"key":"action","value":"READY"}]}}],"classes":[]}]},{"id":"view-4","sections":[{"id":"view-4-section-0","elements":[{"id":"done_ready_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-4-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Game will Start in few seconds, HOLD ON","send_onrelease":false,"message_data":[]}}],"classes":[]}]},{"id":"view-5","sections":[{"id":"view-5-section-0","elements":[{"id":"jump_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-5-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"JUMP","send_onrelease":false,"message_data":[{"key":"action","value":"JUMP"}]}},{"id":"dash_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-5-section-0-element-1","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"DASH","send_onrelease":false,"message_data":[{"key":"action","value":"DASH"}]}}],"classes":["horizontal"]}]},{"id":"view-6","sections":[{"id":"view-6-section-0","elements":[{"id":"waiting_container_id","key":"button","name":"Button","tmpl":"button","constructor_fn":"ButtonElement","options":{"constructor_args":{},"attr_id":"view-6-section-0-element-0","css_classes":"btn","view_action":{"target":null,"view_id":null},"label":"Waiting for Game to End...","send_onrelease":false,"message_data":[]}}],"classes":[]}]}]}'; </script>  </div> <script> var controlsContainer = document.getElementById ( "view-5" ); var doneReadyContainer = document.getElementById ( "view-4" ); var loadingContainer = document.getElementById ( "view-0" ); var readyContainer = document.getElementById ( "view-3" ); var waitingContainer = document.getElementById ( "view-6" ); function sendReadyMessage ( action ) { airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } ); } function sendMessage ( action ) { airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } ); } function hideScreens () { controlsContainer.style.display = "none"; doneReadyContainer.style.display = "none"; loadingContainer.style.display = "none"; readyContainer.style.display = "none"; waitingContainer.style.display = "none"; } function showScreen ( screen ) { hideScreens (); switch ( screen ) { case "Waiting": waitingContainer.style.display = "flex"; break; case "Controls": controlsContainer.style.display = "flex"; break; case "Ready": readyContainer.style.display = "flex"; break; case "DoneReady": doneReadyContainer.style.display = "flex"; break; case "PerformEndGame": waitingContainer.style.display = "flex"; break; } } </script> </body> </html>