iPhone版safariのアドレスバー格納問題

スマホ向けのサイトも多種多様化してきて成熟の域に達したような感もあるけど、デザイン上どうしても上下のスクロールじゃなくてフリックでコンテンツを読ませたいなんて場合も出てくるような気がします。
まぁ出てきてたから困ってるんだけど。

昔のガラケーみたいに各ベンダーで使えるCSSが異なったりページサイズの制限があり過ぎたりって事は無くなってデザイン性のあるものを容易に作れるようになったような気がするんだけど実際は全然容易にはなって無くて、むしろ考える事が増えました。

自分の認識ではスマホはアドレスバーはスクロールするとスルスルとブラウザ上部に格納されるものだと思っていたけど最近のAndroid端末では画面が大きくなったせいかアドレスバーは出っぱなしなんてのもあるみたい。

だったらページ読み込み完了と共にアドレスバーを格納するスクリプトなんて書かなくても良いじゃんとか思うけどiPhoneはそうはいかないし、古いAndroide端末でも同じ。
となるとやっぱり格納しないといけないんだけどここで先に書いたような案件にぶち当たると固まる。



そもそもアドレスバーが格納されるのは[ブラウザがスクロールされた]事を感知して自動で格納するのをスクリプトで1px動かし(スクロールさせ)てそのイベントを誘発させるんだけどブラウザ高さよりもページが短いと動かない。まぁそれは解決する方法がいろいろあって、既に偉大な人達がいろんなライブラリを公開してくれてるから、あまり問題じゃないから良いとして。


一言でスマホって言っても画面の大きさもデバイスピクセル比も全然違うから画面いっぱいに何か表示させようと思うとコンテンツのサイズ固定なんて出来ない。縦向き横向きもあるから、スクリプトでサイズを指定する事になるんだけどここでアドレスバー格納問題が起こってくる。

アドレスバー格納するタイプのAndroid端末が手元に無くて確認は出来なかったんだけどiOSでブラウザの高さ(幅は問題ない)をjQueryで取得するとアドレスバーが出た状態での高さしか取得できない。

あれやこれや試してみたけどダメだった。アドレスバーの高さ分を取得した値に足せば良いって問題でも無くてそれだと上下にスクロールできちゃう事になって全画面表示的な事をしたいのにスクロールしたらページ下部に変な空白が出来ちゃう。

あれこれ試しても結局、完全解決できなかった。iPhoneだけに対応させるなら絶対値で指定しても良いかと思うけどある程度はいろんなスマホに対応させたい。それに結局アドレスバーを格納させるんなら、格納イベント時にコンテンツも同じように上にスライドするのはなんか動き的にスマートじゃない。

根本的には解決しないけどごまかしてそれっぽく見えるようにするだけならコンテンツの高さは最初から
$(window).height()+アドレスバー分
って事にして、そのコンテンツをpositionでブラウザ下部に固定するって方法はどうでしょか。

ただそうなるとアドレスバー出しっぱなしの端末だと上に隠れて見えない部分が発生する。だからそこは隠れても影響ないようなレイアウトでコンテンツを組んでひとまずOKって事に。
モノづくりって観点からするととっても不完全で気持ち悪いけど閲覧するユーザーからは分からない部分だから無理矢理にでも納得してしまいます。

iPhone版safariのGUIってもう少し工夫すればもっと大きな表示スペース作れそうな気がするんだけど自分はそこまで色々と考察を重ねた訳じゃないので原状がベストだってAppleの人達が判断したんでしょうね。格納する必要が無いくらい表示スペースが取れてればこんな苦労要らなくなるのにってのが素直な気持ち。


もしかしたら、いろんな事言う前に、自分のjavascript力が足りないだけって話かも知れませんが。