Question

我有一个包含以下简单标记的页面：

<!DOCTYPE html>
<html>
    <head>
        <title>embed example</title>
        <style>
        .wrapper {
            width: 50%;
        }
        .container {
            height: 0;
            width: 100%;
            padding-bottom: 50%;
            overflow: hidden;
            position: relative;
        }
        .container iframe {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="container">
                <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/238498461&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true">
                </iframe>
            </div>
        </div>
    </body>
</html>

我的电脑看起来很棒： http://i.imgur.com/ZQSYBSD.png

但是，当我尝试在Android手机上的Chrome中加载时，iframe内的内容无法调整为iframe尺寸： http://i.imgur.com/u6FQW88.png

如何才能让它在我的手机上看起来与在我的电脑上看起来一样？

在移动浏览器上将内容适合iframe

0 个答案: