iphoneのinnerHeightがおかしい場合

iphoneのsafariのブラウザでよく、$(window).height()がおかしいという場合がありますが、その場合には、

window.innerHeight

で解決をするという話があるのですが、これも実は曲者だったいりしました。iOS6にて、

上部にあるアドレスバーに関して、見えている時と見えてない時で値が違うような動きをしました。

356と出たり、412って出たり。よくよくみてみると、どうやら、値が可変なようなのですが、アドレスバーが見えている時は小さく見えてしまう。。

という問題がありました。

なので、innerHeightを取得する時には、html中にとりあえず、大きめのサイズの要素を突っ込んでおいて、取得できたら、取り除くなどをすればいいのかと思います。

二重のひっかけになっているようなので、お気をつけください。

 

追記

実際に確認をしていたら、なんとなくですが、分かりましたので、ご報告させてもらいます。

最初にinnerHeightを取得する場合に、例えば、中身のデータがない場合には、

サファリのサイズから、ヘッダー・フッターを抜いた値が取得できます。

なので、サファリでヘッダーを隠したい時。みたいな記事には、innerHeightにヘッダーとフッターの幅を足した値を高さと設定をしましょう。ってなります。

で、高さが十分あるコンテンツの場合に、ヘッダーが上に消えてしまっている場合には、innerHeightは、

safariのサイズからフッターを抜いた値が取得されます。

という事で、簡単にいうと、短いコンテンツの場合には、表示領域っていうのが、かならずアドレスバーに隠れてしまっているので、その長さを消しておくよ!っていう、小さな親切がおせっかいになっているという、有名なパターンになっているようです。

中身の要素を動的にいじることない人はあまり気にならない部分かと思いますがよろしければぜひ

 

  • written on 2013.01.18
  • category : mobile

Next / Prev

前の記事:

次の記事:

Same Category

Page top↑