YAS's VB.NET Tips
 
NetCommons Tips
NetCommons Tips >> 記事詳細

2018/05/29

iPadでiframeの大きさが無視される

Tweet ThisSend to Facebook | by:YAS
 iframeの大きさをwidthとheightで指定し,スクロールバーを表示するようにすると,iPadなど,iosのsafariで表示させたとき,width,heightが無視され,iframeの中身の大きさで表示されてしまいます。


 いろいろ試行錯誤し,NetCommons上でこの症状を回避しつつ,もともとの見栄えに近いものにするには,iframeをdivで囲み,下のようなコードにするとよいことが分かりました。
 例によって,NetCommonsの共通エディタでは,<style>は小分けにする必要があります。また,<div style="~">のように記述すると,共通エディタによって自動修正され,"-webkit-overflow-scrolling:touch;"などが消えてしまいますので,<style></style>の形で記述する必要があります。
 Haederエリアの「お知らせ」に仕込んでおけば,すべての記事で有効になるので便利だと思います。
<style>
.iframe-container {
  overflow:auto;
  border-style:inset;
  -webkit-overflow-scrolling:touch;
}
</style>
<style>
.iframe {
  width:100%;
  height:100%;
  border:none;
}
</style>
<div class="iframe-container" style="width:700px;height:500px;">
  <iframe class="iframe" src="./?action=common_download_main&upload_id=144">
  </iframe>
</div>

23:05 | 投票する | 投票数(0) | コメント(0)