Question

我有一个显示容器div的页面，旁边是一个显示我使用＆＃34; Three.js＆＃34;制作的模型的iframe。哪作得很好。我遇到的问题是当我将其切换到我的触摸设备并与模型交互时（通过放大），整个页面放大而不是模型本身。我一直在研究，我发现的所有解决方案都没有修复我的错误。基本上，我想要的只是模型（iframe内部）本身在触摸设备上放大/缩小而不是整个屏幕。我相信问题必须处理模型本身，因为当我将模型从常规gltf文件切换到pointmaterial时，它工作正常。这是我的代码

HTML

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

CSS

{{1}}

Answer 1

这不是一个真正的ThreeJS问题。您正在寻找的是CSS touch-action属性，以防止在触摸设备上进行缩放。尝试将touch-action: none;添加到您的iframe，这会阻止用户在收集此iframe时放大。

有关详细信息，请参阅MDN documentation。

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

1 个答案: