情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

【CSS】Android端末のブラウザでmin-heightが効かなかったときの応急処置

CSS (6) HTML (15)

Android端末(optimus LTE L-01D)の標準ウェブブラウザにて、CSS の min-height が効いていないことに気が付きました。Androidでmin-heightが効かない、という話やその対策が見当たらなかったので(IE6はたくさんあった)、CSSを諦めてJavaScript(jQuery)で応急処置をしたので、紹介しておきます。

min-heightが効かない

Android 4.0.4 にアップデート済みの docomo Optimus LTE L-01D のデフォルトのブラウザで、CSSのmin-heightが効いていませんでした。

iPhone 5s の Safariでは普通に動作しており、気が付きませんでした。

対策

原因が単純にmin-heightの問題だかはわかりませんが(他に困っているらしき人が見当たらなかったので)、どうやらCSSのmin-heightを受け付けてくれていなかったので、てっとり早く、jQueryを使って次のように書いて応急処置を行いました。

jQuery(function($){
	var element = $("#selector");
	if ( element.height() < 100 ) {
		element.css({ height: '100px' });
	}
});

「min-height: 100px;」を、jQueryを使って実現しています。要素の中身が動的だったりする場合は、上手く動かない場合があると思います。その場合は、同手木に変更するJavaScriptの直後にこのチェックを挟み込むなど、工夫してください。

また、min-widthの場合は、「height」を「width」に変更するだけです。

おまけ:IE6向けの対策と共存できない

当初、IE6のバグを使っている特殊なCSSハックだと知らずに、検索して出てきた「min-height: 100px; height: auto !important; height: 100px; 」を試してみたところダメで、その後jQueryを追加したのですが、このCSSの変更を元に戻さないと、jQuery側がうまく動いてくれませんでした。

コメント(1)

  1. 本屋
    2014年12月16日(火) 11:37

    使えない場面もあるかもですが、CSSだけでも対策は取れますよ。
    min-heightをかけている要素に対して、下記のように高さを持った幅のない擬似用を入れてやるんです。

    div {
    min-height: 100px;
    }
    div:before {
    display: block;
    height: 100px; /* min-heightと同じ高さ */
    content: “”;
    }

    高さを持った要素を中に入れることで、mini-heightと同じ状態を作り出せます。
    いかがでしょうか。

新しいコメントを投稿