DESIGN
高さ100%の要素がandroidでがたつく件
- ARTICLE - No.6
- issue-2015.4.21
- 3,906 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
同じ現象が起こった方はお試しあれ。
