Css 包含三个.js画布的iframe在移动设备上崩溃

我的网站www.stefaniefranciotti.com在桌面上按预期运行，但在移动设备上，包含3.js画布的全屏iframe会使网站崩溃。3th.js画布中有一个3d对象，用户可以在其中旋转，在移动设备上，它可以从屏幕上快速移动。我的iframe样式如下：

html:

---

任何帮助都将不胜感激！！！谢谢

要禁用iframe，您可以使用以下代码：

@media only screen and (max-width : 480px) {
iframe{display:none;}
}

您可以将屏幕宽度更改为您想要的任何宽度

---

干杯

您希望3d对象出现在手机屏幕上？是的，但如果不可能，我只想禁用手机的iframe。禁用将很容易您可以使用media query来实现这一点。我在我的设备上看不到3d模型，但我可以在浏览器上的开发工具上看到它的渲染。这很奇怪。你的浏览器中是否启用了webGL？在我的移动设备上，我不这么认为

body { padding-top: 70px;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
height: 100%;
}


.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 50px;

} 




header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-color: white;



}

header .header-content {
position: relative;
width:100%;
height: auto;
padding: 100px 15px;
text-align: center;
float: left;
}

header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;

font-weight: 100;
}
h1{
font-weight: 100;
font-size: 4em;


}
header .header-content .header-content-inner hr {
margin: 30px auto;
}

header .header-content .header-content-inner p {
margin-bottom: 50px;
font-size: 16px;
font-weight: 400;
color: gray;
}

@media(min-width:768px) {
header {
    min-height: 100%;
}

header .header-content {
    position: absolute;
    top: 50%;
    padding: 0 50px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

header .header-content .header-content-inner {
    margin-right: auto;
    margin-left: auto;
    max-width: 1000px;
}

header .header-content .header-content-inner p {
margin-bottom: 50px;
font-size: 16px;
font-weight: 400;
color: gray;
}
}

@media only screen and (max-width : 480px) {
iframe{display:none;}
}