スマートフォンサイト制作について、ご教授ください。

質問

現在、スマートフォンサイトを制作しており、JavaScriptを多数組み込んだ仕様にしているのですが、複数のJavaScriptを併用する上で行き詰ってしまいました。

具体的な問題点として、
・「to-R」さんで公開されている「heightLine.js(http://blog.webcreativepark.net/2007/07/26-010338.html)」
・「ChronoDrive」さんで公開されている「tilt.js(http://html-coding.co.jp/knowhow/smtp/000140/)」
上記の2種類のJavaScriptを組み込む際、「tilt.js」の機能である縦横切り替えがAndroid(確認した機種はauのIS03)で上手く機能しない状態となってしまいます。
自分なりに考えた結果、iOSの場合は「tilt.js」での切り替えを「window.onorientationchange」にて行っているのに対し、Androidは「window.onresize」にて行っているようですので、「heightLine.js」でも使っている「window.onresize」の処理だけが機能せず、Androidの場合にこのような現象が起きるものと推測しました。

JavaScriptに関する知識が浅いため、処理を追って理解する力が乏しい上、仮に推測が正しかったとしてもそれをどう改善すべきかがわからず、手詰まりとなっている状態です。
「heightLine.js」以外にもブロック要素の高さを揃えるJavaScriptがいくつかありますが、動的に変わる要素を揃えるためにも、できれば「heightLine.js」を使いたいと考えております。
また、高さを揃えるためのCSSも試したのですが、サイト構成上、不具合が生じてしまいましたので、JavaScriptによる制御を第一として制作を進めております。

長文・乱文で大変読みにくい文章かもしれませんが、ぜひお力をお借りしたいと思い、今回このような質問をさせていただきました。
どんな些細な情報でも構いませんので、ご教授の程、よろしくお願い致します。

回答No.1

tenderfeel · ベストアンサー

window.onなんちゃら に直接関数突っ込んでるところを
addEventListenerに変更すれば動くようになると思いますよ。
あとはtilt.jsがやってる事をフレキシブルボックス化するって手も使えそう。スマホならね。

★tilt.js
好きな方使ってください
$(document).ready(function(){
tilt();

var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1){
$(window).on('orientationchange', tilt);
// window.addEventListener('orientationchange', tilt);
}else{
$(window).on('resize ', tilt);
// window.addEventListener('resize ', tilt);
}
});

★heightLine.js
window.onresize=changeBoxSize;
↓
addEvent(window, 'resize', changeBoxSize);

tilt.jsの $(document).ready 以降とheightLine.jsのaddEvent部分を
ファイルから削除してまとめたらすっきりすると思います。

$(document).ready(function(){
tilt();
heightLine();

var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1){
$(window).on('orientationchange', tilt);
}else{
$(window).on('resize ', tilt);
}

$(window).on('resize ', heightLine);
});

お礼

お返事が遅くなってしまい、申し訳ありません。
お教えいただいた通りに試してみたところ、正常に動作しているようです！
スマホサイトに必要な縦横切り替えと今回の課題であった高さを揃える処理を同時に行うことができ、理想的な仕様にすることができました！
細かい解説付きでご回答いただき、ありがとうございました！