タグ別アーカイブ: Android

Chromeデベロッパーツールのモバイル向けデバッグ機能について

| コメントをどうぞ

つい最近まで知りませんでしたが、バージョン33以降のChromeのデベロッパーツールにモバイル向けのデバッグ機能として搭載された「エミュレーション機能」と「リモートデバッギング機能」が便利だったので紹介したいと思います。

エミュレーション機能

デベロッパーツールの起動

デバッグしたいページを開いた状態で、Ctrl+Shift+i(Macの場合はCommand+Option+i)を押して、デベロッパーツールを開きます。
show-devtools
続きを読む

モバイル向け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>