iframe嵌入第三方网站，手机端无法横向滑动及放大缩小

Question

在iframe中嵌入

https://www.desmos.com/calculator?lang=zh-CN
此网站时，电脑端页面正常，手机端无法横向滑动及缩放

尝试过网上的一些代码，对于个别网站可以出现横向滚动条，功能正常，但此网站不可

<div class="container">
    <iframe src="https://www.desmos.com/calculator/vgfqbejegx?lang=zh-CN" scrolling="yes" class="container" ></iframe>
    </div>

<style scoped>
.container{
  height:500px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.frame{
  width:100%;
  height:100%;
}

希望能够像电脑端一样，功能正常

Answer 1

因为 https://www.desmos.com/calculator/vgfqbejegx?lang=zh-CN 网站的头部，设置了 mate viewport，告诉了在移动端该如何缩放页面
并且网站也没有设置最小宽度，默认宽度就是设备宽度，你这里面就是iframe的宽宽，所以不会出现滚动条