移动设备上 Iframe 内的响应式网站

Question

我很难弄清楚这一点。我有一个负责任的网站，我试图通过 Iframe 调用它。它在桌面上运行得很好，但在移动设备上似乎太少了。

<iframe src="https://religious-freedom.herokuapp.com"></iframe>

CSS

            iframe:focus {
            outline: none;
        }
        iframe {
            margin: none;
            border: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            display: block;
        }


        body {
            display: block;
            margin: 0;
            -webkit-overflow-scrolling: touch;
        }

Answer 1

事实证明，智能手机的物理尺寸很奇怪。

视口控制网页在移动设备上的显示方式。如果没有视口，移动设备将以典型的桌面屏幕宽度渲染页面，并缩放以适合屏幕。设置视口可以控制页面的宽度和在不同设备上的缩放。

为在移动设备上良好显示而优化的页面应在文档的头部包含一个元视口，指定

宽度=设备宽度，初始比例=1。

<meta name=viewport content="width=device-width, initial-scale=1">