主にHTMLとCSSで作ったウェブサイトを公開しようとしているところです。パソコンだと正常に動くのに対して、iPhoneで確認しようとすると、固まって内容が見られなくなります。下記は作ったウェブサイトの１つのページのコードですが、どうでしょうか？ウェブページが重くてモバイルで上手く動きませんか？

```

    <!DOCTYPE html>
    <html lang="ja">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
    
    <body>
    
      <style>
        html {
          visibility: hidden;
          opacity: 0;
        }
      </style>
    
      <title>MORIKOBOSHI・</title>
    
      <div class="page-wrap">
    
        <div class="cp_cont">
          <input id="cp_toggle03" type="checkbox" />
          <div class="cp_mobilebar">
            <label for="cp_toggle03" class="cp_menuicon">
    <span></span>
    </label>
          </div>
          <label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
          <div id="body" class="noscroll"></div>
    
          <header class="cp_offcm03">
    
            <nav>
              <ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px;">
    
                <li style="border-bottom: .05px solid lightgray;"><a href="#">ホーム</a></li>
                <li style="border-bottom: .05px solid lightgray;"><a href="#">ブログ</a></li>
                <li style="border-bottom: .05px solid lightgray;"><a href="#">このサイトについて</a></li>
                <li style="border-bottom: .05px solid lightgray;"><a href="#">参考文献</a></li>
    
    
                <div class="searchbar">
    
                  <form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
                    <input class="search2" id="txtSearch" type="text" placeholder="Googleカスタム検索" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
                    <input class="search1" type="submit" name="submition" value="検索" style="padding-left: 5px; top: 153px; height: 25px; width: 34px; display: inline-flex; justify-content: center;">
                    <input class="search2" type="hidden" name="sitesearch" value="default.html">
                  </form>
                </div>
    
    
                <script type="text/javascript">
                  document.getElementById('frmSearch').onsubmit = function() {
                    window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
                    return false;
                  }
                </script>
    
    
                <script>
                  document.getElementById('cp_toggle03').onchange = function() {
                    if (document.getElementById('cp_toggle03').checked) {
                      document.body.style.overflow = "hidden";
                    } else {
                      document.body.style.overflow = "";
                    }
                  }
    
                  if (!!window.performance && window.performance.navigation.type == 2) {
                    window.location.reload();
                  }
                </script>
    
              </ul>
            </nav>
          </header>
    
          <div class="setsumei">
            <br>
            <h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
            <br>
            <p style="text-align: justify; font-size: 16px;"></p>
    
            <p style="text-align: center; font-size: 13px;">著者：◯◯◯◯</p>
            <p style="text-align: center; font-size: 13px;">撮影日：◯◯◯◯年◯◯月◯◯日</p>
    
            <br><br>
            <p style="text-align: justify; font-size: 16px;">
    
              #
            </p>
    
          </div>
    
          <br><br>
          <div class="image">
    
            <a href="#"><img src="#" alt="#" width="90%"></a>
    
            <br><br>
            <a href="#"><img src="#" alt="#" width="90%"></a>
    
            <br><br>
            <a href="#"><img src="#" alt="#" width="90%"></a>
    
            <br><br>
            <a href="#"><img src="#" alt="#" width="90%"></a>
    
            <br><br>
            <a href="#"><img src="#" alt="#" width="90%"></a>
    
            <br><br>
            <a href="#"><img src="#" alt="#" width="90%"></a>
    
            <br><br>
            <a href="#"><img src="#" alt="#" width="90%"></a>
    
            <br><br>
            <a href="#"><img src="#" alt="#" width="90%"></a>
    
            <br><br>
            <a href="#"><img src="#" alt="#" width="90%"></a>
    
            <br><br>
            <a href="#"><img src="#" alt="#" width="90%"></a>
    
          </div>
        </div>
    
        <br><br>
        <footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI© | <a href="#">English</a></footer>
    
      </div>
    
      <style>
          html {
          visibility: visible;
          opacity: 1;
        }
        
        .body {
          background-color: white;
          font-family: sans-serif;
        }
        
        .searchbar {
          float: right;
        }
        
        .image {
          text-align: center;
        }
        
        .setsumei {
          margin-left: 20px;
          margin-right: 20px;
        }
        
        .footer {
          width: 100%;
          height: 40px;
          text-align: center;
          border-top: 1px solid black;
          position: absolute;
          bottom: 0;
          padding: 10px;
        }
        
        .page-wrap {
          min-height: 100%;
          /* equal to footer height */
          margin-bottom: -40px;
        }
        
        .page-wrap:after {
          content: "";
          display: block;
        }
        
        .site-footer,
        .page-wrap:after {
          /* .push must be the same height as footer */
          height: 20px;
        }
        
        .site-footer {
          text-align: center;
          border-top: 1px solid black;
          padding: 10px;
        }
        
        *,
        *:before,
        *:after {
          padding-left: 0;
          margin: 0;
          box-sizing: border-box;
        }
        
        ol,
        ul {
          list-style: none;
        }
        
        a {
          text-decoration: none;
          color: black;
        }
        
        .cp_cont {
          height: auto;
        }
        /* menu */
        
        .cp_offcm03 {
          position: relative;
          z-index: 5000;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          overflow: auto;
          width: 100%;
          height: auto;
          padding-top: 0;
          -webkit-transition: transform 0.3s ease-in;
          transition: transform 0.3s ease-in;
          text-align: center;
          color: black;
          background-color: white;
        }
        
        .cp_offcm03 nav,
        .cp_offcm03 ul {
          height: 100%;
        }
        
        .cp_offcm03 li {
          display: inline-block;
          margin-right: -6px;
        }
        
        .cp_offcm03 a {
          display: block;
          padding: 15px 45px;
          margin-bottom: -5px;
          -webkit-transition: background-color .3s ease-in;
          transition: background-color .3s ease-in;
        }
        
        .cp_offcm03 a:hover {
          background-color: lightgray;
        }
        /* menu toggle */
        
        #cp_toggle03 {
          display: none;
        }
        
        #cp_toggle03:checked~.cp_offcm03 {
          -webkit-transform: translateX(0);
          transform: translateX(0);
        }
        
        #cp_toggle03:checked~.cp_container {
          -webkit-transform: translateX(0);
          transform: translateX(0);
        }
        
        .cp_mobilebar {
          display: none;
        }
        /* content */
        
        .cp_container {
          position: relative;
          top: 0;
          padding: 35px auto;
          -webkit-transition: transform .3s ease-in;
          transition: transform .3s ease-in;
        }
        
        .cp_content {
          margin: 0 auto;
          padding: 20px;
          height: 65vh;
          text-align: center;
        }
        
        @media (max-width: 1130px)and (min-width: 280px) {
          /* menu */
          .cp_offcm03 {
            position: fixed;
            left: -250px;
            overflow-y: hidden;
            width: 250px;
            height: 100%;
            padding-top: 40px;
            color: black;
            background-color: white;
            z-index: 1000;
          }
          .cp_offcm03 nav {
            background: white;
            border-right: 0.5px solid lightgray;
            margin-left: -210px;
          }
          .cp_offcm03 li {
            display: block;
            margin-right: 0;
          }
          .cp_offcm03 a {
            padding: 20px;
          }
          /* menu toggle */
          .cp_mobilebar {
            display: block;
            z-index: 2000;
            position: relative;
            top: 0;
            left: 0;
            padding: 0 25px;
            width: 100%;
            height: 40px;
            background-color: white;
            border-bottom: .05px solid lightgray;
          }
          .cp_menuicon {
            display: block;
            position: relative;
            width: 25px;
            height: 100%;
            cursor: pointer;
            -webkit-transition: transform .3s ease-in;
            transition: transform .3s ease-in;
          }
          .cp_menuicon>span {
            display: block;
            position: absolute;
            top: 55%;
            margin-top: -0.3em;
            width: 100%;
            height: 0.2em;
            border-radius: 1px;
            background-color: black;
            -webkit-transition: transform .3s ease;
            transition: transform .3s ease;
          }
          .cp_menuicon>span:before,
          .cp_menuicon>span:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 1px;
            background-color: black;
            -webkit-transition: transform .3s ease-in;
            transition: transform .3s ease-in;
          }
          .cp_menuicon>span:before {
            -webkit-transform: translateY(-0.6em);
            transform: translateY(-0.6em);
          }
          .cp_menuicon>span:after {
            -webkit-transform: translateY(0.6em);
            transform: translateY(0.6em);
          }
          #cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
          }
          #cp_toggle03:checked+.cp_mobilebar span:before,
          #cp_toggle03:checked+.cp_mobilebar span:after {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
          }
          #cp_toggle03:checked~.cp_offcm03 {
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
          }
          #cp_toggle03:checked~.cp_container {
            -webkit-transform: translateX(250px);
            transform: translateX(250px);
          }
          input:checked~#h-menu_black {
            display: block;
            /*カバーを表示*/
            opacity: .6;
          }
          #h-menu_black {
            display: none;
            position: fixed;
            z-index: 999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0;
            transition: .7s ease-in-out;
          }
          /* content */
          .cp_container {
            top: 60px;
            height: 92vh;
            text-align: center;
          }
          .noscroll {
            overflow: hidden;
            position: fixed;
          }
      </style>
    
    </body>
    
    </html>
```
CC BY-SA 4.0
2022-11-28T22:23:08.627
92485
2022-11-29T14:33:33.330
2022-11-29T14:33:33.330
3060
52414
question
ios html css
作成した web ページを iPhone で開くと固まってしまう