Sample Site
擬似フレームの詳しい説明(図解付)
 Info内にある『PCの方は、ヘッダ(タイトルとメニュー部分)が固定される擬似フレーム仕様。実際は、ヘッダ部がページ上に浮いた状態です。』の詳しい説明です。

▼スマートフォンとフィーチャーフォンの場合


▼PCの場合


▼PCの場合を横から見る


PCの場合、『class="label"』『class="menu"』はこの浮いた状態のまま固定されているので、スクロールが発生しても動きません。
『class="mainbox"』は並んでいた前の二つが浮いた状態であるため、何もしないと上に流れ込んで重なってしまいます。
これを回避するため、『class="mainbox"』の上部内側にその分の余白を入れて押し下げ、重ならないように見せています。
PC用のCSSで『class="mainbox"』の上部paddingが大きいのはこれが理由です。

スマートフォンとフィーチャーフォンの場合は、『class="waku"』の中に上から『class="label"』『class="menu"』『class="mainbox"』と並んだ状態なので、一緒にスクロールします。

スマートフォンの場合、一部端末(バージョン)では条件付きでのみでしか固定出来ないため、表示を揃えました。
※条件について:上の一部端末でも固定にする場合、ピンチイン/アウト(タッチパネルに二本の指を乗せ、画面上の対象物を拡大縮小する操作)を"no"にしなければなりません。また、対応しているiOS5移行でも、時折変な動きをします…。
今のところ、こういった不具合や対応状況が改善されない限りヘッダの固定は行わないほうが懸命です。

なお、フィーチャーフォンはどの端末も対応していません。
*
(2014/02/08 21:25)※0
prev / next
(Back-HOME)
人気急上昇中のBL小説
BL小説 BLove
- ナノ -