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

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

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

经过优化以便在移动设备上良好显示的页面应在文档的头部包含指定

的元视口

width = device-width，initial-scale = 1。

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

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

1 个答案: