是我的CSS或Javascript的任何崩溃的谷歌浏览器的移动的版本？

2exbekwf 于 2022-12-30 发布在 Java

关注(0)|答案(1)|浏览(121)

我是HTML、CSS和Javascript的初学者，创建了一个带有响应菜单的简单网站，它在除了移动的以外的所有浏览器上都运行良好现在的情况是，在浏览了几个页面之后，如果我试图点击一个链接并导航到另一个页面，它会一直显示正在加载该页面，但什么也没发生。它会停留在当前页面上。之后，网站就好像冻结了，我很难导航到我以前查看过的任何页面。
我看到有些人在使用基于特定代码（CSS和/或Javascript）的移动的版Google Chrome浏览器时遇到了困难，我想知道这是否是导致我的网站无法正常打开的原因。如果有人知道导致我的网站无法正常加载的原因，我将非常感谢您与我分享您的知识。谢谢。
HTML/菜单：

<!DOCTYPE html>
<html lang="ja">
    
<head>
      
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
    
<title>MORIKOBOSHI・</title>
    
</head>
    
<body>
      
<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; font-size: 15px;">
            
<li style="border-bottom: 1px solid lightgray;"><a href="#">ホーム</a></li>
<li style="border-bottom: 1px solid lightgray;"><a href="#">ブログ</a></li>
<li style="border-bottom: 1px solid lightgray;"><a href="#">このサイトについて</a></li>
<li style="border-bottom: 1px solid lightgray;"><a href="#">参考文献</a></li>

Javascript：

<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: 36px; display: inline-flex; justify-content: center; font-size: 10.5px;">
<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 = "";
  }
}
 
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
 document.getElementsByClassName('cp_menuicon')[0].click();
    };

　for (var i = 0; i < elements.length; i++) {
　　elements[i].addEventListener('click', closeHamp, false);
    }
</script>

CSS：

.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%;
            margin-bottom: -40px;
        }

.page-wrap:after {content: "";
                  display: block;
        }

.site-footer,
.page-wrap:after {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;
            }
        }

css

来源：https://stackoverflow.com/questions/74925420/is-any-of-my-css-or-javascript-crashing-the-mobile-version-of-google-chrome

1条答案

按热度按时间

vmdwslir1#

我发现移动的版谷歌浏览器的问题，它与我使用的任何代码都没有关系。我还没有在我的网站上附加SSL证书，还没有让它在谷歌、雅虎、必应和其他搜索引擎上搜索。正因为如此，谷歌是（在这一点上它应该正确地）认为我的网站是不安全的。在更改移动的版谷歌浏览器的设置，使所有网站（不仅仅是那些被谷歌认为安全的）可以查看，我现在可以查看我的网站没有任何问题。
一旦我有一个SSL证书附加到我的网站，并使其在搜索引擎上搜索，我应该很好地去任何浏览器没有任何问题，应该没有必要改变浏览器设置。

赞(0）回复(0）举报 2022-12-30

我来回答

是我的CSS或Javascript的任何崩溃的谷歌浏览器的移动的版本？

1条答案

相关问题

热门标签

最新问答