WebTecNote

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…

※以下全てWebKitの話です。

screenとwindowの高さに関する値が違う

やっぱり一筋縄ではいかなかった。

2011-10-04 1st – jsdo.it – share JavaScript, HTML5 and CSS

直接見る

Androidだと

screen.height = screen.availHeight = window.innerHeight
window.outerHeightが明らかに大きすぎるのはdevicePixelRatioの影響を受けているからで、
(window.outerHeight/window.devicePixelRatio) とすれば本来の値が得られる。

OS2.2と2.3以外は見れてないのでバージョンによって違う可能性大。

iOSだと

3.xと4.xで値が変わる。

iOS4
screen.height – screen.availHeight = Status Bar Height
screen.availHeight – window.outerHeight = Navigation Bar + Tab Bar Height

iOS3
screen.height が 396pxです。
screen.height = screen.availHeight = window.outerHeight
window.outerHeight – window.innerHeight = Tab Bar Height (-4px)
480 – window.innerHeight = Status Bar + Navigation Bar + Tab Bar Height

アドレスバーの高さの算出

Android

(window.outerHeight/window.devicePixelRatio) - window.innerHeight

iOS

横向きになってもscreen.heightとかの値は縦向きのままなので、
window.orientationかwindow.innerHeightとwindow.innerWidthの比較で使う方を変える。

var height = (Math.abs(window.orientation)==0)? 480:screen.width;

イベントの順はresize → orientationchangeで
resizeの時点ではwindow.orientationの値は変わっていない。
orientationchange前のイベントで回転を知るなら内部サイズの比較で

var height = (window.innerHeight > window.innerWidth)? 480:screen.width;

iPhone, iPod
height - window.innerHeight - (20 + ((Math.abs(window.orientation)==0) ? 44 : 32))

iPad
height - window.innerHeight - 20;

64 = Status Bar(20) + Tab Bar Height(44/32)

iPadはタブバーがないのでステータスバーのサイズだけ除く。

var bar = 0,
	height = screen.height,
	ua = window.navigator.userAgent,
	portrait =  (window.innerHeight > window.innerWidth);

if(!window.webview && !window.navigator.standalone){
	if($.support.android){
	    bar = (window.outerHeight/window.devicePixelRatio) - window.innerHeight;
	}else if(ua.indexOf('iPad') !== -1){
		height = portrait? screen.height:screen.width;
		bar = height - window.innerHeight - 20;
	}else if(ua.indexOf('iPhone') !== -1 || ua.indexOf('iPad') !== -1){
		height = portrait? 480:screen.width;
		tab =  portrait? 44 : 32;
	    bar = height - window.innerHeight - (20 + tab);
	}
}

サンプル

コンテンツがwindow.innerHeightより小さい時にアドレスバーを隠す – jsdo.it – share JavaScript, HTML5 and CSS

他のブラウザの場合

Firefox Fennec

バグなのかもしれないが、window.outerHeightとwindow.outerWidthが存在しない。
また、ソースに含まれているとifで弾いていてもエラーが発生する。

Opera

window.outerHeightの値がdevicePixelRatioの値で狂っていないので割らなくていい。

Androidでアドレスバーを隠した場合の弊害について

※追記

現在私が出している結論は Android端末でアドレスバーを隠す必要はない です。

理由は、

  1. 画面サイズが大きい端末が主流になっている
  2. ブラウザのUIがOSバージョン・機種によって違う
  3. 描画に関する不具合を引き起こす可能性が高まる

この３点ですが、一番大きいのは２番目のUIの違いです。

端末によってリロードボタンやタブきりかえボタンの場所が異なり、
大きく分けるとメニューに配置されているものとアドレスバーに配置されているものの２つに別れます。
アドレスバーにそれらのボタンがあるブラウザでは、一旦ブラウザを終了させて再起動しないとアドレスバーが表示されない…なんてことになったりします。

アドレスバーを隠す処理をするのは、外観は変わってもUIは変わらない
iOSだけでいいと思う今日このごろです。

モバイルバージョンを終了