【发布时间】：2019-12-13 00:00:47
【问题描述】：
我想用 three.js 创建一个响应式 Web 应用程序。
我做了一个骨架，但这似乎只能在 PC 和 Android 智能手机上正确运行。苹果设备如 macbook iphone 和 ipad 存在问题。似乎在这些设备中，底部的工具栏最终不在屏幕上
我已经在 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>
【问题讨论】：