モバイル向けWebページでiFrameを使用する際のスクロール問題

| 5件の返信

infoScoopをタブレット対応させる際に、iFrame絡みのクロスブラウザ対策でハマったので、そのあたりの対策について紹介したいと思います。

 

サポートブラウザ

今回サポート対象となったブラウザ(OS)は以下になります。

  • Safari(iOS)
  • Android Browser(Android)
  • IE(Windowsタブレット)

 

DOCTYPE宣言

HTMLの記述の前に、まずはDOCTYPE宣言です。 以下はHTML5のDOCTYPE宣言になります。

<!DOCTYPE HTML>

現状では何も宣言しないとブラウザのレンダリングモードは互換モードが選択されます。
また、互換モードに比べて標準モードの場合は記述が厳格になることもあり表示速度の向上も期待できます。
なので、モバイル向けにWebページを作成する際にはHTML5のDOCTYPE宣言をするようにしましょう。

 

iOSのiFrameにおけるスクロール問題

iFrameにコンテンツを表示するために、以下のようにHTMLを記述してブラウザで表示してみたところ、

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">  
    .ifrm {
      width:300px;
      height: 250px;
      border:none;
    }
  </style>
</head>
<body>
  <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
</body>
</html>

Android BrowserとIEでは問題ありませんでしたが、

IE(Windowsタブレット)の場合

IE(Windowsタブレット)の場合

iOS Safariで表示してみると、コンテンツのサイズに合わせてiFrameがのびてしまいました。PC向けのサイトだと以下のように画面一杯に広がってしまいます。

iframe-safari-err


iOS Safariの場合

 

どうやらiOS Safariではiframeのscrolling属性が”auto”、もしく”yes”の場合、指定したサイズが効かないらしく、他の方のブログを参考にさせて頂いてiframeの直上にスクロール要素を用意する方法が有効である、ということが分かりました。
エージェントで判別してiOS Safariの場合だけ直上にスクロール要素を用意する方法も考えましたが、
煩雑になると思いCSSで対応することにしました。

以下のように記述し、実機で確認してみたところ、

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">  
    .ifrm-container {
      width:300px;
      height:250px;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
    }
    .ifrm {
      width:100%;
      height:100%;
      border:none;
    }
  </style>
</head>
<body>
  <div class="ifrm-container">
    <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
  </div>
</body>
</html>

SafariではiFrameの高さも固定され問題なくスクロールできるようになりましたが、
今度はAndroid BrowserとIEで2重にスクロールバーが表示されるようになってしまいました。

2重スクロール(IEの場合)

2重スクロール(IEの場合)

 

2重スクロールへの対処

どうやらiframeの高さがうまく調整できていないのが原因のようです。
iframeの下に余白が発生してしまっています。

試行錯誤の後、iframe要素に明示的に「display:block;」を指定することで回避できました。
理由はよく分かりません、デフォルトの表示形式が「inline-block」だとしても高さ調整は可能なはず…
対処するのに半日ほど掛かってしまいました…。
最終的に作成できたHTMLは以下になります。

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <style type="text/css">
    .ifrm-container {
      width:300px;
      height:250px;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      display: inline-block;
      margin: 10px;
    }

    .ifrm {
      width:100%;
      height:100%;
      border:none;
      display:block;
    }
  </style>
</head>
<body>
  <div class="ifrm-container">
    <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
  </div>
  <div class="ifrm-container">
    < iframe class="ifrm" scrolling="auto" src="http://jquery.com/"></iframe>
  </div>
</body>
</html>

モバイル向けWebページでiFrameを使用する際のスクロール問題」への5件のフィードバック

  1. ピンバック: iOS(iPhone)でiframeを使う場合のCSSコード

  2. 喜田

    こんにちは、初めまして。

    iPhoneでiframeを表示させた場合、指定した高さが効かない問題を調べていて辿り着きました。

    防備録としてブログの記事にさせて頂きました。

    もし問題がありましたら、ご連絡下さい。

    ありがとうございました。

    返信
  3. we are fans

    Youre so cool! I dont suppose Ive learn anything in this way before. Flexible to locate everybody with unique ideas on this subject. realy thank you for starting this up. this website is something that is required on the net, somebody that has a bit originality. helpful project for bringing a new challenge to the net!

    返信
  4. ピンバック: モバイル向けWebページでiFrameを使用する際のスクロール問題 | infoScoop開発者ブログ | 日刊☆なんでもトピックス!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>