質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

406閲覧

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

AyanoAK

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

1グッド

2クリップ

投稿2018/06/22 02:54

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

現在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_👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_lemon2003_

2018/08/22 09:24

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

2018/08/22 09:27

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

2018/08/23 00:21

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

回答1

0

ベストアンサー

__該当のソースコード(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})()

アドレスバーを含む(ステータスバーを除く)高さを直接求める方法が
無かったので、window.scrollTo(0, 0)で内部的にスクロールした直後に幅と高さを求めました。
もし求める方法がわかれば、直接代入してください。

デバッグする方法がないので、本当にこれで動くのかわかりません。

もし、この方法がうまくいかないなら、document.documentElement.clientHieghtをつかってみるのも
手かもしれません。

投稿2018/08/23 00:32

編集2018/08/23 02:29
_lemon2003_

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AyanoAK

2018/08/23 00:36

またまたありがとうございます!! お手間でなければ、どうすればフルスクリーン時に固定できるのか教えていただけますと、大変助かります…!
AyanoAK

2018/08/23 02:31

ありがとうございます! 早速試してみて、またご報告いたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問