在触摸设备上放大iframe内容时保持页面100%

我有一个页面显示了一个container div,它旁边是一个iframe,它显示了我使用“three.js”创建的一个模型,这个模型工作得很好。我遇到的问题是,当我把它切换到我的触摸设备上并与模型交互时(通过放大),整个页面就会放大,而不是模型本身。我一直在研究,我找到的所有解决方案都没有解决我的错误。基本上,我只想让模型(在iframe内部)在触摸设备上放大/缩小,而不是整个屏幕。我相信这个问题必须处理这个模型本身,因为当我将模型从一个常规的gltf文件切换到一个pointmaterial文件时,它可以正常工作。这是我的密码

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. */
}