レスポンシブWebデザイン導入（Parllet の場合 明細表（収支明細）－９） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
sakashushu です。
2/8 からParllet（個人で作成・公開しているアルファ版のWeb家計簿） のレスポンシブWebデザイン導入シリーズは明細表篇のブログラミング（ブログを書きながらプログラミング）に入っています。
スポンサードリンク
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
スマホ：Android 2.3.3（HTC Desire HD 001HT）
Github公開リポジトリ
■ 現状
2/7 に現時点のParllet（パレット）（GithubのこのCommitバージョン ）の収支明細を元に、スナップショットを兼ねてサンプル収支明細１ を作りました。
ここがスタート地点です。
前回（2/16） までに、タブレットサイズ（768px）以下になった時の機能として以下を実装しました。
- １行目のヘッダーは ロゴ と 会員メニュー のみ残し、２行目に 大分類 ＞ 小分類 の形のパンくずリストで表示。
- 大分類（明細表）・小分類（収支明細）をクリック時にスライドメニューが開く。
- コンテンツ部分はParllet（パレット） ログインページでの手法（ここら辺）で分かりやすい要素から順々に設定。
- 表全体のレスポンシブ化は諦めて、表の部分だけは横スクロールする方向性に。
- 表の部分のスクロールの PC での動きはチェック済み
今回も、いつものように体当たりで学びながら進めていきます。
（1/11 に提示した新手法の方で実施するので、以前のようにサンプルページを元にして編集はしません。あくまで元になるのはGithubのこのCommitバージョン です。）
■ 体当たり開始
沿っていくのは2/6の案 です。
前回（2/16） に表の部分のスクロールの PC での動きはチェックしました。
今回は表の部分のスクロールの Android での動きを愛機でチェックしていきたいと思います。
上のざっくり環境でも書いた通り、Android 2.3.3（HTC Desire HD 001HT）でチェックしていきます。（2/11にAndroid 4.1.1（freebit mobile PandA）を購入していますが、まだ引越し作業中でHTC Desireが手元にあるので、より古い機種での確認が望ましいとの判断です。）
早速、まずは Android で開いてみます！
・・・・・。
まだスクロールしてないんですけどね ^^;
この時点で明細行の上の方がヘッダーに隠れちゃってますね。
確かに、ヘッダーを position: fixed; で固定しているので、その分明細行は padding-top の値を調整しています。（決め打ちで #dl_tblFrame に padding-top: 90px; を設定）
それが隠れるということは、ブラウザによってヘッダーの高さが違ってくるということか。
現時点で私はスマホでのデバッグ実行ができないので、alert でヘッダーの高さを表示してみます。
Parllet/app/views/DetailList/dl_header.html 内に追記（太字の部分）
（前略）
<script type="text/javascript">
<!--
jQuery(function() {
alert(jQuery('#header').height());
（後略）
はい、スマホでのヘッダーの高さは 177px ですね。
PC でもリロード！
こちらは 167px です。
やはりスマホの方のヘッダーの高さがPCより10px高くなっている。
む～・・・。
だんだん、position: fixed でのヘッダーの固定に限界を感じてきたな・・・。
とはいえ、今すぐに変える訳にもいきません。
いずれもっと良いUIを考えるとして、今はこの延長上での対策です。
ブラウザによって高さが変わる可能性があるなら、CSSでの決め打ちはできません。
jQuery で、ヘッダーの高さを取得してそこから #dl_tblFrame の padding-top の値を導き出します。
Parllet/app/views/DetailList/dl_header.html 内の編集（太字の部分）
（前略）
<script type="text/javascript">
<!--
jQuery(function() {
var intPadTop = jQuery('#header').height() - jQuery('#prltMain').css('padding-top').replace("px", "") - jQuery('#dlMain').css('margin-top').replace("px", "");
jQuery('#dl_tblFrame').css('padding-top', intPadTop);
（後略）
はい！
明細行がいい位置に表示されました。
（画像は載せていませんが、ここでPCでの表示もAndroid 4.1.1（freebit mobile PandA）での表示も問題ないことを確認しました。）
さて、ここからが本来のスクロールの確認ですね。
え～・・・。
画像ではお伝えできませんが、スマホで横スクロールしません！
これについては原因の予想はついているんですが、今回はここまでとします。
次回はスマホでの表の部分の横スクロール対応をしていきたいと思います。
※ 毎度の念のための断りですが、今回編集した内容は現時点（2014/2/17）では公開しているParllet（パレット） の方には反映しておりません。
次回に続きます！
2/19 追記
続きを書きました。
いつも最後まで読んでいただいてありがとうございますm(__)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0