移动设备上 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">