html - 缩放后 iframe 不工作

Question

我的 Iframe 需要一些小帮助。

我的框架运行良好。

<div id="my-div" style="width:790px; height:240px; overflow-y: hidden; overflow-x: scroll; position:relative;">
<iframe style="position:absolute; top: -245px; left: -3px; width:1280px; height:490px;"
src="http://www.augustyna.pl/prognozy/17dni.php" id="my-iframe" scrolling="no"></iframe>
</div>

但我不得不将我的网站扩大到 1920 像素，在这种情况下我的 i 框架看起来很糟糕，你能告诉我在这种情况下我该如何解决它吗？

@media screen and (min-width: 1920px) and (-webkit-min-device-pixel-ratio:0) {
  body {
    zoom:130%;
    }
}

这是网站:www.surfszkola.pl/prognoza提前谢谢你!

Answer 1

您可以使用此代码将您喜欢的内容显示到不同的屏幕尺寸:

iframe {
  border: none;
  width: 100%;
  height: 300px;
  -ms-zoom: 1.5;
  -moz-transform: scale(1.5);
  -moz-transform-origin: 0 0;
  -o-transform: scale(1.5);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(1.5);
  -webkit-transform-origin: 0 0;
}
@media (min-width: 1200px) {
  .content_viewport {
    border: 0px none;
    margin-left: -36px;
    height: 812px;
    margin-top: -486px;
    width: 650px;
  }
}
@media (max-width: 1200px) {
  .content_viewport {
    border: 0px none;
    margin-left: -306px;
    height: 812px;
    margin-top: -86px;
    width: 650px;
  }
}

<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">
<iframe src="http://augustyna.pl/prognozy/jastarnia.php" scrolling="no" class="content_viewport">
  <p>Your browser does not support iframes.</p>
</iframe>
</div>