release

DESIGN

高さ100%の要素がandroidでがたつく件

  • ARTICLE - No.6
  • issue-2015.4.21
  • 1,171 views

Posted by Keisuke Aratsu
POP1280

ブログ制作中にメインビジュアルをブラウザの高さ100%で表示していると、androidでプレビューした時にあからさまにがたつく現象が起こってしまった。別に気にする程でもないか…と思ってたけどスクロールするたびにガタガタしてたらさすがにイラっとしたので直す事にした。
iPhoneじゃこんな事起こらなかったんですがね。優秀なり、アップルコンピュータ。

原因は単純で、メインビジュアルを表示した際にdivなりheaderなりの要素の高さが取得できないからスクロールした際に高さがバラつき、ガタついてしまっていた模様。なので高さをjsで取得してやると簡単に直りました。ちなみに検証していた実機はgalaxy s4とiPhone 5cです。
ソースは以下。

var WindowHeight = $(window).height();
$(function(){
	if(WindowHeight > 600){ 
		$('.section').css('height',WindowHeight+'px');
	}
});

このサイトの記事を参考にさせていただきました。
kyasper

同じ現象が起こった方はお試しあれ。

LATEST_

ABOUT ME_

アラツ ケイスケ :
福岡県糟屋郡志免町在住。畑で野菜を育てて生きていきたいwebデザイナー。嫌いなものはクチャラー。1984年10月生まれ。昨年三十路デビューしました。音楽とB級映画をこよなく愛す一面、垂れ流すだけで何を聞いたか観たのか全く記憶にないこともしばしば。(大抵寝落ちしてるか、本を読んでます。)
このブログでは自分が書きたい音楽の事やデザインの事、福岡の事を好きなように書いて行くつもりです。記事掲載のご相談も受け付けますのでどうぞお気軽に。随時受け付けます。僕がバテあがってたらお返事までお時間掛かると思いますが悪しからず。

→CONTACT