У меня есть страница, которая отображает контейнер div, а рядом с ним - iframe, который отображает модель, которую я сделал с использованием «Three.js», которая отлично работает.Проблема, с которой я столкнулся, заключается в том, что когда я переключаю это на сенсорное устройство и взаимодействую с моделью (путем увеличения), вся страница увеличивается вместо самой модели.Я исследовал, и все решения, которые я нашел, не исправили мою ошибку.По сути, все, что я хочу, - это чтобы сама модель (внутри iframe) увеличивала / уменьшала масштаб на сенсорном устройстве, а не на весь экран.Я считаю, что проблема связана с самой моделью, потому что, когда я переключаю модель с обычного файла GLTF на точечный материал, он работает нормально.Вот мой код
HTML
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<h1>text</h1>
<p>text </p>
</div>
<!--sticky footer-->
<footer class="footer">
<div >
<p align="center"><a href="index.html">Home</a> | <a href="es/test.html">spanish</a><br>
<!--<p>This interactive was made possible through the support of</p>-->
<a href="index.html"><img src="images/logo.png" alt="logo" style="width:100%" /></a></p>
</div>
</footer>
</nav>
</div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-12 px-0">
<!-- Featured Content -->
<div class="embed-responsive embed-responsive-16by9" onload="onload="redirect();">
<iframe style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none;
margin:0; padding:0; overflow:hidden; z-index:1;" class="embed-responsive-item" src="models/page.html" allowfullscreen></iframe>
</div>
</main>
</div>
CSS
#width{
width: 600px;
}
body{
overflow: hidden;
}
body p {
font-size: .875em;
font-family: 'Open Sans';
}
h1,h2,h3,h4 {
font-family:'Marcellus';
font-size: 1.5em;
}
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
/*sticky-footer*/
.footer {
position: absolute;
bottom:0%;
margin-bottom:3%;
width: calc(100% - 20px);
height: 100px; /* Set the fixed height of the footer here */
/*line-height: 60px; /* Vertically center the text there */
/*padding: 20px;*/
background-color: #F8F9FA;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar-sticky {
position: relative;
top: 0;
padding-bottom: 0px;
height: calc(100% - 200px);
/* height: 90%; */
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}