【问题标题】:Responsive website inside Iframe on mobile devices移动设备上 Iframe 内的响应式网站
【发布时间】:2016-08-31 01:24:06
【问题描述】:

我很难弄清楚这一点。 我有一个负责任的网站,我试图通过 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;
        }

【问题讨论】:

    标签: html css iframe mobile


    【解决方案1】:

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

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

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

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

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

    【讨论】:

    • 很好的答案。我会说 IO 和 Android 对 iFrame 有不同的行为。您需要在两者中进行大量测试,以确保获得您想要的结果
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-15
    • 1970-01-01
    • 2013-10-09
    • 1970-01-01
    • 2020-06-24
    相关资源
    最近更新 更多