スマートフォンのリサイズイベントを無視する

現在Vegas （https://vegas.jaysalvat.com/）を使用して背景に画像が画面いっぱいになるスライドショーを実装しています。
スマートフォンでテストしたところ、スクロール時にリサイズイベントが起こってしまい背景画像が大きくなったり小さくなったりしてしまいます。

皆様の知恵をお借りできればと思います、何卒よろしくお願いします。

試したこと

https://qiita.com/tonkotsuboy_com/items/d32ec6e7a1f6f592d415
こちらのサイトを参考に修正できないか試していますが、Javaの知識が少なく思うようになりません。

他の背景画像用Javaを使用しようかとも思いましたが、ズームアウトとフェードインが使えるものが見当たりません…

該当のソースコード（Vegas）

<script src="js/vegas.min.js"></script>
<script>
$(function (){
  $('body').vegas({ //背景画像でスライドショーしたい場所の設定
    slides: [
     { src: 'images/photo01.jpg' }, //スライドする画像を配列で設定
     { src: 'images/photo06.jpg' },
    ],
     delay: 5000, //スライドまでの時間ををミリ秒単位で設定
     timer: false, //タイマーバーの表示/非表示を切り替え
     animation: 'fade', //スライドのアニメーションを設定
     transition: 'zoomOut', //スライド間のエフェクトを設定
     transitionDuration: 5000 //エフェクト時間をミリ秒単位で設定
  });
});
</script>

_lemon2003_

2018/08/22 09:24

一応ですが、これはJavaではなく、Javascriptですよ。

_lemon2003_

2018/08/22 09:27

リサイズイベントのなかに、フルスクリーンにしたときは無効にするように追加すればどうでしょうか。また、フルスクリーンにした時の大きさの基準はwindowのサイズをセットすればどうでしょうか。

AyanoAK

2018/08/23 00:21

lemon2003様、アドバイスありがとうございます。なるほど、思いつきもしませんでした…！リサイズイベントをどのように設定するのか分かっておらずお恥ずかしい限りですが、調べてやってみます！ありがとうございます！！

回答1件

ベストアンサー

__該当のソースコード（Vegas）__で

javascript
1$(function (){
2  $('body').vegas({ //背景画像でスライドショーしたい場所の設定
3    
4  });
5});

でbodyを指定していると思いますが、そのbodyの大きさをフルスクリーン時に固定するという手もあります。
bodyを変更するとダメな場合は、wrapperを作って指定してもいいと思います。

追記1

策1

css
1body {
2  height: 100%;
3}

height: 100% でダメかな..?

策2苦肉の策

css
1body { /* セレクターは jquery で指定したものと同じにする */
2  bottom: 0;
3  position: absolute;
4}

jquery
1(function(){
2  window.scrollTo(0, 0);
3  let w = window.innerWidth;
4  let h = window.innerHeight;
5  $(window).on("orientationchange", function(){
6    if (w > h) {
7      document.body.width = h;
8      document.body.height = w;
9    }else{
10      document.body.width = w;
11      document.body.width = h;
12    }
13  });
14})()