@noriiiii8 (Nori Yamada)posted at 2020-09-15

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

Q&A

Closed

HTML CSS JavaScript 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で検索をかけまくっていたというわけです。

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

Are you sure you want to delete the question?

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

調べてやってみたこと

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

1Answer

Comments

Your answer might help someone💌