Question

我在我的网站上使用iframe的以下代码。

 Meteor.publish('allDocuments', function(pageNavigator = 0) {
        return CustomCollection.find({},{ skip:pageNavigator, limit:25      
        });      
    });

.callrates {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: scroll !important;
    -webkit-overflow-scrolling:touch !important;
    height:500px;
}

.callrates iframe {
    position: relative;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

问题是，当我从移动设备以纵向方向查看时，iframe的宽度大于屏幕尺寸，因此使其水平和垂直滚动。我希望整个宽度适合屏幕。我该怎么做？

Answer 1

结帐此代码：http://codepen.io/anon/pen/YpZgYm

<iframe src="https://www.xyz.php" width="" height="0" allowfullscreen=" " frameborder="0" scroll="no">

更新

可能不是最优雅的解决方案，但如果iframe源页面无法响应，则可以缩小iframe内容。

尝试添加

iframe{
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
}

iframe宽度不适合移动设备上的纵向方向

1 个答案: