2

免責事項: 私は JavaScript または jQuery の専門家ではありません。

これは、私が理解できない小さな修正であるため、おそらく簡単に解決できる問題です。ブラウザが横向きの場合は横向き、縦向きの場合は縦向きのサイトを実装しています。CSS の変更は、メディア クエリを使用すると簡単に変更できるため、問題になりません。私が遭遇する問題は、画面が横向きモードのときに特定のスクリプトのみを実行したい場合です。次に遭遇する問題は、これをモバイルで動作させたいだけでなく、標準のブラウザーでも応答できるようにしたいということです。つまり、画面の幅 > 画面の高さを検出し、そのスクリプトを実行します。これまでの私のコードは次のとおりです。

var height = $(window).height();
var width = $(window).width();
if (width > height) {
    //run landscape script
} else {
    //run portrait script
};

これは、ページの読み込み時に方向を検出するためにうまく機能しますが、スクリプトが window.resize にバインドされていないため、画面のサイズが変更されても変化しません。そうは言っても、window.resizeにバインドしても機能しません。

これについてもっと良い方法はありますか？それとも、すでにここにあるものを修正する必要がありますか?

4

1 に答える 1

3

将来誰かがこの問題に遭遇した場合に備えて、私の問題を解決したものを投稿します。

関数にサイズ変更イベントを追加しようとすると、コードは次のようになります。

$(window).on('resize', function() {
    var height = $(window).height();
    var width = $(window).width();
    if (width > height) {
        //run landscape script
    } else {
        //run portrait script
    };
)};

これは問題なく機能しましたが、ブラウザのサイズが変更されたときにのみスクリプトが起動されたため、そのようには見えませんでした。これは不可欠ですが、ページの読み込み時にスクリプトを起動する必要もあります。私の解決策は、イベントに「ロード」を追加することでした：

$(window).on('resize load', function() {
    var height = $(window).height();
    var width = $(window).width();
    if (width > height) {
        //run landscape script
    } else {
        //run portrait script
    };
)};
于 2012-12-14T16:45:47.243 に答える