我想创建一个用threx.js的响应式Web应用程序。
我做了一个骨架，但这似乎仅在PC和Android智能手机上正确运行。MacBook iPhone和iPad等Apple设备上存在问题。看来，在这些设备中，底部的工具栏最终出现在屏幕外
我已经在PC上和某些Android智能手机设备上尝试过该应用程序，并且似乎可以正常工作，而在iPad设备上，它有问题。
这是一个最小的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="scripts/OrthographicTrackballControls.js"></script>
<link rel="stylesheet" href="styles/toolbar.css">
<title>Document</title>
<style>
html,body{
width: 100%;
height:100%;
overflow: hidden;
margin: 0px;
padding: 0px;
background: linear-gradient( #EAF0F8, #749ACF);
}
.button{
flex: 0 0 50px;
background-color: transparent;
min-height: 71px;
display: block;
}
.container-row
{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
background-color: transparent;
}
.container-column
{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex:1;
background-color: transparent;
}
canvas{
width: 100%;
height: 100%;
min-height: 10px;
background: transparent;
}
#sliderDiv{
display: flex;
flex: 0 0 70px;
background-color: transparent;
order: 1;
/*margin-bottom: 10px;*/
}
#playerDiv{
display: flex;
flex: 0 0 50px;
background-color: transparent;
}
.hspaceExpand{
flex:1;
background-color: transparent;
min-width: 0px;
}
#notes
{
background-color: #ddffdd;
border : 6px solid #4CAF50;
flex: 0 0 300px;
display: none;
}
#canvasKf
{
background-color: red;
flex: 0 0 500px;
display: none;
}
#containerSP
{
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
}
#viewToolBarMobile
{
position:absolute;
background-color: rgba(0,0,0,0.3);
bottom:0px;
width: 100%;
height: 292px;;
display: flex;
flex-direction:row;
justify-content: center;
display: none;
}
#toolbar2
{
position: relative;
background-color: transparent;
min-width: 252px;
}
#toolbar{
display: none;
}
/* media queries */
@media screen and (min-width:600px)
{
#notes
{
display:block;
}
#canvasKf{
display:block;
}
#openToolBarBtn
{
display: none;
}
#toolbar{
display: block;
}
#viewToolBarMobile
{
display: none;
}
#toolbar2
{
display: none;
}
#containerSP
{
margin-left: 10px;
margin-right: 10px;
}
}
@media screen and (min-width:1300px)
{
#containerSP
{
flex-direction: row;
}
#playerDiv{
margin-right: 10px;
}
}
</style>
</head>
<body>
<div id="main-container" class="container-row">
<div id=notes>
note<br>
note<br>
note<br>
note<br>
note<br>
</div>
<div id="central-container" class="container-column">
<div class="container-row" style="position: relative">
<div id="toolbar" style="position: absolute">
<button id="leftBtn" class="rectangle"> L </button>
<button id="rightBtn" class="rectangle"> R </button>
<button id="upBtn" class="rectangle-up"> U </button>
<button id="frontBtn" class="rectangle-up"> FR </button>
<button id="downBtn" class="rectangle-up"> D </button>
<button id="elementBtn" class="rectangle-up"> EL </button>
<button id="arcSupBtn" class="rectangle-up"> AS </button>
<button id="arcInfBtn" class="rectangle-up"> AI </button>
</div>
<canvas id="canvas3d"> </canvas>
</div>
<div id="containerSP">
<div id="sliderDiv">
<div class="hspaceExpand"></div>
<img src="http://yobit.altervista.org/imgMod/slider.png" style="width:340px">
<div class="hspaceExpand"></div>
</div>
<div id="playerDiv">
<div class="hspaceExpand"></div>
<img src="http://yobit.altervista.org/imgMod/buttonPlayer.png" style="width:340px">
<div class="hspaceExpand"></div>
</div>
</div>
<div id="openToolBarBtn" class="button">
<div class="container-row">
<div class="hspaceExpand"> </div>
<img src="http://yobit.altervista.org/imgMod/buttonView.png " style="width:340px">
<div class="hspaceExpand"> </div>
</div>
</div>
</div>
<canvas id="canvasKf"></canvas>
<div id=viewToolBarMobile>
<div id="toolbar2">
<button id="leftBtn" class="rectangle"> L </button>
<button id="rightBtn" class="rectangle"> R </button>
<button id="upBtn" class="rectangle-up"> U </button>
<button id="frontBtn" class="rectangle-up"> FR </button>
<button id="downBtn" class="rectangle-up"> D </button>
<button id="elementBtn" class="rectangle-up"> EL </button>
<button id="arcSupBtn" class="rectangle-up"> AS </button>
<button id="arcInfBtn" class="rectangle-up"> AI </button>
</div>
<button id="closeBtn" style="position: absolute; right:0%"> X </button>
</div>
</body>
<!-- <script src="kfgui.js"> </script> -->
<script src="scripts/view3d.js"></script>
<!-- <script src="viewToolBar.js"> </script> -->
</
</html>
display: flex不受所有浏览器类型的支持。要适合所有浏览器的Flex显示屏，请使用以下内容：
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
您需要根据浏览器使用正确的供应商前缀。通过使用以上所有内容，您将考虑大多数现代浏览器。
在此处查看一个简短的描述，其中有一个使用display: flex
查看此内容，以便在Stackoverflow上进行另一种说明。
让我们知道这是否解决了您的问题。