0
私は小さなプロジェクトを構築しています。私はすでにここで多くの回答を得ています。モバイルでアンカータグが動作しない
私の問題は、アンカータグがモバイルデバイス上で動作するようになっていることです。 アンカータグはデスクトップデバイスで正常に動作しているようですが、iPhoneでクリックしようとすると結果は表示されません。
EDIT：（アドバイスのためにあなたのアンドレイ・ゲオルギューに感謝）より良い説明する： 私は自分のデスクトップコンピュータなどのデバイス上でcodepenを開くと、予想通り、ナビゲーションバーが動作します。それは@mediaクエリに達したとして、それが崩壊ブレークポイント、そして幅が< 768の場合、折りたたまれたナビゲーションバーにトグルアイコンが表示され、すべてのアンカータグがクリック可能で動作しています（JavaScriptが必要なときにdivにリダイレクトされます）。 しかし、iPhone 7でページを読み込むと、Navbarが期待どおりに折りたたまれていますが、アンカータグをクリックしてもどこにも表示されません。
私はAndrei Gheorghiuの両方の提案を試みましたが、少なくとも私の電話で問題を解決しませんでした（まだありがとう！）。私は実際に問題がアンカータグに関連していると思う。スクロールを扱うjavascriptを削除し、アンカータグhrefを簡単なIDで直接リンクするとどちらもうまくいかなかった。
助けが必要ですか？ 私はブートストラップ4を使用しています、codepenはここにあります：https://codepen.io/diegomengue/pen/VWWjpj。
HTML：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class='navbar navbar-inverse navbar-toggleable-sm mx-auto sticky-top'>
<button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarNav">
<ul class='navbar-nav mx-auto'>
<li class='nav-item mx-auto'><a href='#' id='inicioMenu' class='nav-link'><strong>Diego Mengue</strong></a></li>
<li class='nav-item mx-auto'><a href='#' id='portfolioMenu' class='nav-link'>Portfólio</a></li>
<li class='nav-item mx-auto'><a href='#' id='contatoMenu' class='nav-link'>Contato</a></li>
</ul>
</div>
</nav>
</body>
CSS：
body {
background-color: #EAEDFB;
color: white;
font-size: 20px;
.navbar{
background-color: #6F7ECC;
top: 0.5em;
width: 74%;
}
li {
padding: 0.3em 0.3em 0.3em 0.3em;
margin: 0 0.3em 0 0.3em;
}
a {
color: white;
pointer-events: auto;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
a:hover {
color: #D9DDF3;
text-decoration: none;
}
a:active {
color: white;
text-decoration: none;
}
form {
margin-bottom: 0.5em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h4 {
font-size: 1.5em;
}
h5 {
font-size: 1.5em;
margin-bottom: 0.5em;
}
p {
font-size: 1em;
}
.vertical-align {
display: flex;
align-items: center;
}
#icone {
width: 2.5em;
margin: 0 0.6em 0 0.6em;
}
hr {
background-color: white;
}
h1, h2 {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
#divPortfolio {
height: 800px;
}
.text-right {
margin-right: 0.3em;
}
footer {
background-color:#6F7ECC;
width: 74%;
text-align: center;
}
::-webkit-input-placeholder {
font-size: 1em!important;
}
:-moz-placeholder { /* Firefox 18- */
font-size: 1em!important;
}
::-moz-placeholder { /* Firefox 19+ */
font-size: 1em!important;
}
@media screen and (min-width: 0px) {
body {font-size: 10px;}
.navbar {font-size:1.2em;}
footer {font-size: 0.6em; height: 5em; padding-top: 1.4em;}
h4 {margin-top: 1em;}
}
@media screen and (min-width: 768px) {
body {font-size: 13px;}
.navbar {font-size: 1.2em;}
footer {font-size: 1em; height: 3em;
padding-top: 1.4em;}
h4 {margin-top: 0em;}
}
@media screen and (min-width: 992px) {
body {font-size: 14px;}
}
@media screen and (min-width: 1200px) {
body {font-size: 16px;}
}
JS：
var mq = window.matchMedia("(min-width: 768px)");
function scrollToAnchor(aid){
var aTag = $(aid);
if (mq.matches) {
$('body').animate({scrollTop: (aTag.offset().top)-82},'slow');
} else {
$('body').animate({scrollTop:(aTag.offset().top)-180},'slow');
}
};
$("#inicioMenu").on('click touchend', function(e) {
e.preventDefault();
scrollToAnchor("#inicio");
return false;
});
$("#portfolioMenu").on('click touchend', function(e) {
e.preventDefault();
scrollToAnchor('#portfolio');
return false;
});
$("#contatoMenu").on('click touchend', function(e) {
e.preventDefault();
scrollToAnchor('#contato');
return false;
});
この質問をどのようにすればいいですか？ –