@noriiiii8
Revisions
Report this question
Subscribe question
Help us understand the problem. What is going on with this question?
Q&A
Closed

iOSでjQueryが機能せず…その原因が分かりません

現在、友人にポートフォリオの作成を依頼されて、
横スクロール型のサイトを作成しています。(縦スクロールは一切ありません)
私自身、HPの作成歴はほぼありません。
ただ読めて少し書ける程度です。

先日、横並びにしているはずの要素が上下にズレてしまう問題が起きました。
【HTML, CSS】「横に並べた要素」が縦スワイプでズレてしまいます

そこで、読み込んでいたjQueryのバージョンを最新のもの(3.5.1)に変更したところ、
見事にズレが生じなくなりました!(^^)/

ところが…、

今度はモーダルが表示されなくなってしまいました。
(:3 」∠ )

PC(MacBook Air)版のChromeで確認しても問題はないのに
iPhoneで実機確認するとモーダルが表示されません。
これはSafariでもChromeでも同じでした。

サンプルコード(jQuery)
script.js
$(function(){

  $(window).on('load',function() {
    var h = $(window).height();
    $('body').height(h); // アドレスバーを除いたサイズを付与
    $('.contents').height(h);
    $('.modal-wrapper').height(h);
    $('.modal').height(h);
    $('.image').height(h);
  });

  var w = $(window).width();
  //パソコン版
  if(w > 1366){
    $('.first-modal-item').css('margin-left', (w - 960)/2 + 'px' );
    $('.second-modal-item').css('margin-left', 100 + 'px' );
    $('.last-modal-item').css('margin-left', 100 + 'px' );
    $('.last-modal-item').css('padding-right', (w - 960)/2 + 'px' );
  }//スマホ・タブレット版
  else if(w <= 1366 ){
    $('.first-modal-item').css('padding-left', (w - w*0.9)/2 + 'px' );
    $('.last-modal-item').css('padding-right', (w - w*0.9)/2 + 'px' );
  }

  //モーダル表示設定

  //セットここから
  $('#second').on('click','a',function(){
    $('#second-modal').fadeIn();
  });

  $('.time').on('click',function(){
    $('.modal-wrapper').fadeOut();
    console.log('ボタンによってモーダルが閉じました');
  });
  //セットここまで

  $('#third').on('click','a',function(){
    $('#third-modal').fadeIn();
  });

  $('.time').on('click',function(){
    $('.modal-wrapper').fadeOut();
    console.log('ボタンによってモーダルが閉じました');
  });

  $('#fourth').on('click','a',function(){
    $('#fourth-modal').fadeIn();
  });

  $('.time').on('click',function(){
    $('.modal-wrapper').fadeOut();
    console.log('ボタンによってモーダルが閉じました');
  });

});

サンプルコード(HTML)
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Masahiro Kamei Archive">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height">
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="responsive.css" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
    <title>Masahiro Kamei Archive</title>
  </head>
  <body>

    <!-- コンテンツ部分ここから -->
    <div class="wrapper">
      <!-- 一つ目 -->
      <div class="contents" id="first">
        <div id="title-wrapper">
          <h1>MASAHIRO KAMEI</h1>
          <h2>Archive</h2>
        </div>
      </div>
      <!-- 二つ目 -->
      <div class="contents" id="second">
        <div class="content-wrapper">
          <a href="#"><img src="assets/test-01.jpg" alt="2枚目の画像"></a>
          <h3>FREEZY(2016)</h3>
          <p>Original Works</p>
        </div>
      </div>
      <!-- 二つ目モーダル -->
      <div class="modal-wrapper" id="second-modal">
        <div class="modal">
          <div class="modal-item close-modal">
            <img src="assets/time04.png" class="time">
          </div>
          <div class="modal-item image first-modal-item">
            <img src="assets/test-02.jpg" alt="モーダル1枚目の画像" class="images">
          </div>
          <div class="modal-item image second-modal-item">
            <img src="assets/test-03.jpg" alt="モーダル2枚目の画像">
          </div>
          <div class="modal-item image last-modal-item">
            <img src="assets/test-04.jpg" alt="モーダル3枚目の画像">
          </div>
        </div>
      </div>
      <!--- 三つ目 -->
      <div class="contents" id="third">
        <div class="content-wrapper">
          <a href="#"><img src="assets/test-01.jpg" alt="2枚目の画像"></a>
          <h3>FREEZY(2016)</h3>
          <p>Original Works</p>
        </div>
      </div>
      <!-- 三つ目モーダル -->
      <div class="modal-wrapper" id="third-modal">
        <div class="modal">
          <div class="modal-item close-modal">
            <img src="assets/time04.png" class="time">
          </div>
          <div class="modal-item image first-modal-item">
            <img src="assets/test-02.jpg" alt="モーダル1枚目の画像" class="images">
          </div>
          <div class="modal-item image second-modal-item">
            <img src="assets/test-03.jpg" alt="モーダル2枚目の画像">
          </div>
          <div class="modal-item image last-modal-item">
            <img src="assets/test-04.jpg" alt="モーダル3枚目の画像">
          </div>
        </div>
      </div>
      <!--- 四つ目 -->
      <div class="contents" id="fourth">
        <div class="content-wrapper">
          <a href="#"><img src="assets/test-01.jpg" alt="2枚目の画像"></a>
          <h3>FREEZY(2016)</h3>
          <p>Original Works</p>
        </div>
      </div>
      <!-- 4つ目モーダル -->
      <div class="modal-wrapper" id="fourth-modal">
        <div class="modal">
          <div class="modal-item close-modal">
            <img src="assets/time04.png" class="time">
          </div>
          <div class="modal-item image first-modal-item">
            <img src="assets/test-02.jpg" alt="モーダル1枚目の画像" class="images">
          </div>
          <div class="modal-item image second-modal-item">
            <img src="assets/test-03.jpg" alt="モーダル2枚目の画像">
          </div>
          <div class="modal-item image last-modal-item">
            <img src="assets/test-04.jpg" alt="モーダル3枚目の画像">
          </div>
        </div>
      </div>
    </div>
    <!-- コンテンツ部分ここまで -->

    <!-- フッターここから -->
    <footer>
      <a href="mailto:&#109;&#97;s&#97;&#104;&#105;r&#111;&#46;k&#97;&#109;&#101;&#105;26&#64;g&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;">CONTACT</a>
    </footer>
    <!-- フッターここまで -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
  </body>
</html>

サンプルコード(CSS)
style.css
@charset "UTF-8";

@font-face{
  font-family: 'Futura-bold';
  src:local('fonts/futura.ttf')format('ttf');
}

@font-face{
  font-family: 'Futura-medium';
  src:local('fonts/futura medium bt.ttf')format('ttf');
}

@font-face{
  font-family: 'Futura-light';
  src:local('fonts/futura light bt.ttf')format('ttf');
}

/*全体設計*/

html,body{
  /*height: 100vh;*/
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: "futura-bold";
  box-sizing: border-box;
}

/*コンテンツ部分*/

div.wrapper{
  background-color: white;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory; /*x軸のスクロールスナップ*/
}

div.wrapper::-webkit-scrollbar {
  display: none /*スクロールバーの非表示*/
}

div.contents{
  /*height: 100vh;*/
  width: 100vw;
  display: inline-block;
  text-align: center;
  scroll-snap-align: center; /*画面中央にスナップ*/
  box-sizing: border-box;
}

div#title-wrapper{
  padding-top: 33vh;
}

div#title-wrapper h1{
  background-color: white;
  width: 100vw;
  margin: 0;
  font-size: 93.34px;
  line-height: 93.34px;
}

div#title-wrapper h2{
  background-color: white;
  width: 100vw;
  font-size: 53.34px;
  line-height: 53.34px;
  margin: 0 auto;
  padding-top: 40px;
}

div.content-wrapper{
  width: 100vw;
  text-align: center;
}

div.content-wrapper a{
  height: auto;
  cursor: pointer;
}

div.content-wrapper a img{
  width: auto;
  margin-top: 13vh;
  cursor: pointer;
}

div.content-wrapper h3{
  background-color: white;
  width: 960px;
  margin: 0 auto;
  text-align: left;
  font-size: 21.34px;
}

div.content-wrapper p{
  background-color: white;
  width: 960px;
  margin: 0 auto;
  text-align: left;
  font-size: 10.34px;
  font-family: 'futura-medium';
}

/*モーダル部分*/
div.modal-wrapper{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*height: 100vh;*/
  width: 100vw;
  background-color: rgba(35, 24, 21, 0.5);
  z-index: 99;
  display: none;
}

div.modal{
  /*height: 100vh;*/
  width: 100vw;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

div.modal::-webkit-scrollbar {
  display: none /*スクロールバーの非表示*/
}

div.modal-item{
  display: inline-block;
  /*height: 100vh;*/
  width: 100vw;
  text-align: center;
  scroll-snap-align: center; /*画面中央にスナップ*/
}

div.image img{
  width: auto;
  margin-top: 13vh;
}

div.close-modal{
  width: 40px;
  height: 40px;
  position: fixed;
  margin-top: 8vh;
  margin-left: 82vw;
}

div.close-modal img.time{
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/*フッター*/

footer{
  height: 30px;
  width: 100vw;
  text-align: center;
  opacity: 0.7;
  position: absolute;
  bottom: 0;
  z-index: 100;
}

footer a{
  line-height: 13.34px;
  text-decoration: none;
  color: black;
  font-size: 10.34px;
  font-family: 'futura-medium';
}

/* タブレット */
@media(max-width: 1366px){

    div#wrapper{
      box-sizing: border-box;
      overflow-y: hidden;
    }

    div#title-wrapper{
        padding-top: 33vh;
    }

    div.title-wrapper h1{
      display: none;
    }

    div.title-wrapper h1#media{
      display:block;
    }

    div.content-wrapper{
        width: 100vw;
        text-align: center;
      }

    div.content-wrapper a{
        width: 90vw;
        cursor: pointer;
    }

    div.content-wrapper a img{
        width: 90vw;
        margin-top: 25vh;
        cursor: pointer;
      }

    div.content-wrapper h3{
    background-color: white;
    width: 90vw;
    margin: 0 auto;
    text-align: left;
    font-size: 15.34px;
    }

    div.content-wrapper p{
    background-color: white;
    width: 90vw;
    margin: 0 auto;
    text-align: left;
    font-size: 10.34px;
    font-family: 'futura-medium';
    }

    footer a{
      line-height: 10.34px;
      text-decoration: none;
      color: black;
      font-size: 10.34px;
      font-family: 'futura-medium';
    }

    /*ここからモーダル*/

    div.image img{
        width: 90vw;
        margin: 0 auto;
        margin-top: 25vh;
    }

    div.close-modal{
      margin-top: 18vh;
      margin-left: 90vw;
      cursor: pointer;
    }

    footer{
      height: 50px;
    }

    footer a{
      line-height: 10.34px;
      text-decoration: none;
      color: black;
      font-size: 10.34px;
      font-family: 'futura-medium';
    }
}


/* スマートフォン */
@media(max-width: 670px){

    div#wrapper{
      box-sizing: border-box;
      overflow-y: hidden;
    }

    div#title-wrapper{
        padding-top: 38vh;
    }

    div#title-wrapper h1{
        font-size: 36px;
        line-height: 36px;
    }

    div#title-wrapper h2{
        margin: 0 auto;
        font-size: 25px;
        line-height: 25px;
        margin: 0 auto;
        padding-top: 20px;
    }

    div.content-wrapper{
        width: 100vw;
        text-align: center;
      }

    div.content-wrapper a{
        width: 90vw;
        cursor: pointer;
    }

    div.content-wrapper a img{
        width: 90vw;
        margin-top: 30vh;
        cursor: pointer;
      }

    div.content-wrapper h3{
    background-color: white;
    width: 90vw;
    margin: 0 auto;
    text-align: left;
    font-size: 15.34px;
    }

    div.content-wrapper p{
    background-color: white;
    width: 90vw;
    margin: 0 auto;
    text-align: left;
    font-size: 10.34px;
    font-family: 'futura-medium';
    }

    /*ここからモーダル*/

    div.image img{
        width: 90vw;
        margin: 0 auto;
        margin-top: 30vh;
    }

    div.close-modal{
      margin-top: 23vh;
      margin-left: 86vw;
      cursor: pointer;
    }

    div.close-modal img.time{
      width: 35px;
      height: 35px;
    }

    footer{
      height: 50px;
    }

    footer a{
      line-height: 10.34px;
      text-decoration: none;
      color: black;
      font-size: 10.34px;
      font-family: 'futura-medium';
    }
}

/*小型スマートフォン iPhone5,SE*/
@media(max-width: 320px){
  div#title-wrapper{
      padding-top: 38vh;
  }

  div#title-wrapper h1{
      font-size: 30px;
      line-height: 30px;
  }

  div#title-wrapper h2{
      margin: 0 auto;
      font-size: 20px;
      line-height: 20px;
      margin: 0 auto;
      padding-top: 20px;
  }

  div.content-wrapper{
      width: 100vw;
      text-align: center;
    }

  div.content-wrapper a{
      width: 90vw;
      cursor: pointer;
  }

  div.content-wrapper a img{
      width: 90vw;
      margin-top: 30vh;
      cursor: pointer;
    }

  div.content-wrapper h3{
  background-color: white;
  width: 90vw;
  margin: 0 auto;
  text-align: left;
  font-size: 15.34px;
  }

  div.content-wrapper p{
  background-color: white;
  width: 90vw;
  margin: 0 auto;
  text-align: left;
  font-size: 10.34px;
  font-family: 'futura-medium';
  }

  /*ここからモーダル*/

  div.image img{
      width: 90vw;
      margin: 0 auto;
      margin-top: 30vh;
  }

  div.close-modal{
    margin-top: 24vh;
    margin-left: 85vw;
    cursor: pointer;
  }

  div.close-modal img.time{
    width: 25px;
    height: 25px;
  }

  footer{
    height: 50px;
  }

  footer a{
    line-height: 10.34px;
    text-decoration: none;
    color: black;
    font-size: 10.34px;
    font-family: 'futura-medium';
  }
}

調べてやってみたこと

①クリックイベントの記述を変更してみる

sample.js
.click(function(){});

これを

sample.js
.on('click',function(){});

に変更してみましたが結果は変わらず、ダメでした。

②該当の要素に「cursor:pointer;」を適用してみる

sample.css
cursor:pointer;

これも適用してみたのですが、ダメでした。

あと一歩なのですが、どうしても分かりません。
同じようなケースは調べてみて、だいたい試してみましたがクリックイベントは発生しないままです。どのようにすればうまくいくのでしょうか?
jQueryを使用するのが間違っているのでしょうか?

【2020/09/17】解決しました。

モバイル版のsafariとChromeで「クッキー削除操作」を行ったところ、
無事にスマホ(iPhoneX)でも動いていることを確認しました。(^0^)/

参考したサイト:safariでwebサイトが閲覧できない時の対処設定方法

(解決までの道のり)
この記事にいただいたコメントを参考に試行錯誤してみたものの、
うまくいかないので、自分ではない人間にURLを送りつけて確認してもらいました。
すると、問題なく動いているではありませんか!(あれぇ?)
こうなるともう私のスマホがおかしいということになってきますので、
『iPhone javascript 動かない』みたいなKWDで検索をかけまくっていたというわけです。

今回も長い時間がかかってしまいましたが、なんとか解決できたので良かったです。
また一つ、勉強になりました。

0
2
Answer

こんにちは。度々すみませんw
うろ覚えを何点か。

$(function(){
  $(window).on('load',function() {
  })
})

最初のこの部分ですが、jquery3からは
この書き方がアウトになっていたような。

$(function(){
})

$(window).on('load',function() {
})

と分けて記述してみてはいかがでしょう。

あと、スマホの場合、クリックとタップで別イベントあったような。
touchstart?みたいな指定があったと思います。

0
2回目のコメントありがとうございます!

①$(function(){});
②$(window).on('load',function() {});

この違いなど、よく理解しないまま書いていました。
教えていただいて助かりました。。
なんとかスマホでsafariは動くようになりました。
(あとはChromeだけです…orz)

いろいろ試してみたいと思います!
クッキー削除したらできました!
safariもChromeも、スマホでクッキーの削除操作をしたら問題なく動くようになりました。
**safari → iPhoneの[設定]からアプリ設定変更**
**Chrome → モバイル版アプリでクッキー削除**

いろいろ教えていただき勉強になりました。
本当にありがとうございました。
不具合解消おめでとうございます。
クッキー削除による解決は全然想像できてませんでした。
解決方法の共有、ありがとうございます!
View the remaining 2 comments.

こんにちは。

PC(MacBook Air)版のChromeで確認しても問題はないのに
iPhoneで実機確認するとモーダルが表示されません。
これはSafariでもChromeでも同じでした。

自分のローカル環境で試したところ、該当モーダルは問題なく動作しましたが、実機確認された際の機種は何でしょうか?
Screen Shot 2020-09-16 at 1.23.58.png

jQueryを使用するのが間違っているのでしょうか?

jQueryを使用しない方法であれば、

手法1

<input type="button" onclick="hoge()">
function hoge() {
    console.log('hello world')
}

手法2 (非推奨)

こちらの方法ではターゲットに対して複数のコールバックを登録することができません。
保守性の観点からあまり宜しくない書き方ですので、この方法で絶対に書かなければならないというルールが無い限り手法3addEventListenerを使ってください。

<input type="button" id="hoge_id">
const target_element = document.getElementById('hoge_id')
if (target_element) {
    target_element.onclick = function () {
        console.log('hello world')
    }
}

手法3 (推奨)

該当ノードにイベントリスナーを登録します。

<input type="button" id="hoge_id">
const target_element = document.getElementById('hoge_id')
if (target_element) {
    target_element.addEventListener('click', function() {
        console.log('hello world')
    })
}

その他

本例では動作に影響はありませんが、基本的には

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

はヘッダ(<head></head>)内に記述してください。


また、デバッグに際してはChromeFirefox共に開発者ツールというものがありますので適時ご活用いただき、デバッグ・トレースを行われるといいと思います。

モバイル版等の所謂レスポンシブ系のデバッグも行うことができます。
下記サイトをご参照ください。
PC版Chromeブラウザでスマホサイトをチェックする

P.S

唯一思い付くのは、実機環境でのインターネット接続の有無です。
jQueryを外部のcdn(コンテンツデリバリネットワーク)から取得している以上、インターネット非接続環境ではjQueryを読み込むことができない為、発生している可能性があるということです。

解決策としては至って単純で、該当バージョンのjQueryをダウンロードし、通常スクリプトと同じように読み込むのみです。

0
コメントありがとうございます。

>実機確認された際の機種は何でしょうか?
私はiPhoneXで確認していました。

指摘していただいた通り、
・jQueryを使用しない方法で記述
・cdnではなくファイルを置いて直接読み込む
これらを試してみたのですが、結果は変わりませんでした…。

ですが先ほど、モバイル版safariとChromeで、クッキー削除操作を行ったところ、
無事に動作していることを確認しました。
**safari → iPhoneの[設定]からアプリ設定変更**
**Chrome → モバイル版アプリでクッキー削除**

クッキーに関してはあまり理解していないのでロジックは分かりませんが、
なんにせよ手元で動いたのでハッピーです。
私以外の人(Androidユーザーなど)にも確認してもらったりしてみたいと思います。

いろいろと、初心者の私でも分かりやすいよう、
丁寧に教えていただき本当にありがとうございました。
Chromeであれば、開発者ツールを開いた状態で`Shift`を押しながらリロードボタンを右クリックすることでページ単体のキャッシュクリア(ハード再読み込み)というものを行うことができます。
ウェブ開発には必須となるテクニックの一つなので、覚えておくと良いです。
JSにかかわらず、CSS等静的コンテンツは全てキャッシュされます。
ありがとうございます。
PC版での「ハード再読み込み(⬆️⌘R)」は知っており、
Chromeのデベロッパーツールで確認する時もそれは理解して使っていました。
ただ今回は、スマホ(iPhoneX)での読み込みはアドレスバーの再読み込みボタンしか押していなかったので、それが問題だったのかもしれませんね。
View the remaining 2 comments.
Help us understand the problem. What is going on with this answer?
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした