Ionic 3-根据屏幕尺寸更改iframe内容大小

Posted 2021-05-06

我的应用程序中有新闻部分，我正在使用来自某个网​​站的iframe标签显示新闻，我希望根据移动屏幕尺寸更改iframe内容大小。

News.html代码：

<iframe width="300" height="470" src="https://tctechcrunch2011.files.wordpress.com/"></iframe>

我的屏幕看起来像这样：

答案

您可以像使用CSS的页面上的任何其他元素一样设置iframe的样式。如果使用视口（vw / vh / vmin / vmax）值，则可以按比例缩放设备/窗口大小的高度和宽度。下面我在iframe中添加了一个ID：

<iframe width="300" height="470" src="https://tctechcrunch2011.files.wordpress.com/" id="newsframe"></iframe>

在CSS中，您可以添加定位元素ID的规则：

#newsframe {
  //set the height to 100% of the viewport less the height of the header
  height: calc(100vh - 60px);

  //set the width to 100% of the viewport width
  width: 100vw; 

  //remove border, padding, margin
  border: none;
  padding: 0;
  margin: 0;
}

另一答案

如果你没有给出任何宽度尺寸，它需要全宽。