Question

我有一个rails应用程序，它在iframe中加载外部网站（主要是文章）。而且我已经让大多数文章都能在任何设备上做出响应。我只是在移动Safari的某些网站上发表文章时遇到了麻烦。

示例：
1. http://vyrtex-staging.herokuapp.com/article/what-went-wrong-in-flint
2. http://vyrtex-staging.herokuapp.com/article/built-on-passion-how-vox-media-grew-from-its-roots-as-an-oakland-a-s-blog-into-one-of-the-internet-s-biggest-publishers
3. http://vyrtex-staging.herokuapp.com/article/why-isn-t-america-paying-attention-to-trevor-noah

以下是每个人在移动旅行中看到的内容：
1. http://i.imgur.com/UAsiJD3.jpg
2. http://i.imgur.com/QgYiOsp.jpg
3. http://i.imgur.com/4wg8y9w.jpg

他们在桌面Safari上看起来完全没问题，桌面/移动Chrome专用移动版Safari就是问题所在。

这是我的CSS：

.body_container {
   width:100%;
   height: 100vh;
   padding-top:5px;
   position: relative;
   background-color: white;
}
.intrinsic-container {
   position: relative;
   height: 0;
   -webkit-overflow-scrolling: touch !important;
   overflow: scroll !important;
}
.intrinsic-container iframe {
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

这是我的HTML：

<div class="body_container">
   <div class="intrinsic-container">
      <iframe src="<%= @article.url %>"></iframe>
   </div>
</div>

这里是javascript我正在运行以保持iframe响应（iframe本身，不一定是其中的内容）：

<script>
  var $iframes = $( "iframe" );

  // Find &#x26; save the aspect ratio for all iframes
  $(".intrinsic-container").each(function () {
    $( this ).data( "ratio", this.height / this.width )
      // Remove the hardcoded width &#x26; height attributes
      .removeAttr( "width" )
      .removeAttr( "height" );
  });

  $(document).ready( function  () {
      $(".intrinsic-container").each( function() {
      // Get the parent container&#x27;s width
      var width = $( this ).parent().width();
      var height = $( this ).parent().height() - $("#navbar").height();
      var ratio = height / width;
      var ratioString = String(ratio*100)+"%";
      $(this).css('padding-bottom',ratioString)
      $( this ).width( width )
        .height( width * $( this ).data( "ratio" ) );
    });
  });

  // Resize the iframes when the window is resized
  $( window ).resize( function () {
    $(".intrinsic-container").each( function() {
      // Get the parent container&#x27;s width
      var width = $( this ).parent().width();
      var height = $( this ).parent().height() - $("header").height();
      var ratio = height / width;
      var ratioString = String(ratio*100)+"%";
      $(this).css('padding-bottom',ratioString)
      $( this ).width( width )
        .height( width * $( this ).data( "ratio" ) );
    });
  // Resize to fix all iframes on page load.
  }).resize();
</script>

我猜这可能是一个CSS问题，我必须添加一些webkit的东西，以确保iframe中的内容响应加载。关于如何解决这个问题的任何想法？

移动safari加载iframe内某些网站的响应版本

0 个答案: