我为 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>
当我在任何设备(
Android ( both app and browsers )或iOS ( browsers ))上运行它时，下面粘贴的部分:<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>
屏幕截图:
当在
iOS AirConsole应用程序上播放时，尽管同一部分无法完全检测到“ onmousedown ”事件，但工作正常。似乎点击事件基本上发生在靠近屏幕中心的区域，而其余区域无法检测到任何用户交互。为什么只有
iOS AirConsole app显示这种异常行为？我要怎么做才能使两个按钮都单击？我的
CSS或html内容是否有缺陷？请引导我朝正确的方向前进。这是AirConsole上的the game
最佳答案
我没有iOS手机对此进行测试，但是据我所知，您使用它似乎很奇怪
.inner_div {
width: 100%;
}
...其中 .inner_div 用于“跳转”和“破折号”按钮，但是您也可以使用
.button_div {
width: calc(50% - 5px);
float: left;
}
那么，为什么对于相同的DIV元素有两个不同的宽度值？
另外，我可能会做些不同的操作以减少代码量并使事情更简单。如果您有兴趣，我可以举个例子。
但是，我希望这对您有所帮助。
关于ios - 在iOS App中， Controller 未点击屏幕右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50504873/