aタグをクリックしてもイベントが発生しない

Question

実現したいこと

現在レスポンシブのwebサイトを作成しています。
スマホ画面上でアイコンをタッチしたとき、リンク先に
飛ぶようにしたいです。

（※アイコンを長押しすると、リンク先の"サブ画面"が表示されるので、hrefタグの記入ミスではないはずです。）

発生している問題

■アイコンをタッチしてもリンク先が開きません。
※パソコン用のデザイン上ではアイコンをクリックするとリンク先に飛びますが、スマホ・タブレット用のデザインにするとリンク先に飛びません。
※インスペクトで見てもエラー表示はありません。

<div id="Icons">
 <ul>
  <li class="icon">
   <a href="documents/prospectus.pdf" target="_blank">
     <svg xmlns="●●●"></svg>
     <p>prospectus</p>
    </a>
   </li>
　<li class="icon">
   <a href="photo.html">
     <svg xmlns="●●●"></svg>
     <p>photo</p>
    </a>
   </li>
　<li class="icon">
   <a href="contact.html">
     <svg xmlns="●●●"></svg>
     <p>contact</p>
    </a>
   </li>             
  </ul>
 </div>

@charset "UTF-8";

/* Google Font */
<style>
@import url('https://fonts.googleapis.com/css?family=Economica&display=swap');
</style>

/* Fontsize */
@media screen and (min-width:1025px){
  html{
    font-size: 62.5%;
    overflow:hidden;
    height: 100%;
  }
}
@media screen and (min-width:640px) and (max-width:1024px){
  html{
    font-size: calc(16px + ((1vw - 6.4px)*3.571));
    overflow:hidden;
    height: 100%;
  }
}
@media screen and (max-width:639px) {
  html{
    font-size: 16px;
    overflow:hidden;
    height: 100%;
  }
}

/* Common */
*{
  margin: 0;
  padding: 0;
}
body {
  font-style: normal;
  font-size: 16vw;
  font-size: 1.6rem;
  color: rgb(34, 36, 39);
  white-space:normal;
  width: 100%;
  height: 100%;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body::-webkit-scrollbar {
  display:none;
}
svg{
  stroke-linecap: round;
}


@media screen and (min-width:1025px){
#Icons{
  position: fixed;
  right: 15px;
  bottom: 5px;
}
.icon{
  list-style-type:none;
  text-align: center;
  width: 60px;
  height: 60px;
  margin: 5px 0px;
  border-radius: 15%;
  background-color: rgba(34, 36, 39, 0.9);
  box-shadow: 2px 2px 3px gray;
}
.icon:hover {
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform .2s;
  transform-origin: center;
  transform: scale(0.9, 0.9);
}
.icon svg{
  width: 50px;
  height: auto;
  stroke: #fff;
  stroke-width: 5px;
  fill: none;
}
.icon a:hover{
  text-decoration: none;
  cursor: pointer;
}
.icon p{
  font-size: 9px;
  padding: 0px;
  margin: 0px;
  margin-top: -10px;
  color: #fff;
}
}
@media screen and (min-width:640px) and (max-width:1024px){
 //スマホデザインと同じ（サイズ以外）ため省略
}
@media screen and (max-width:639px) {
#Icons{
  display: flex;
  width: 100%;
  height: 60px;
  background-color: rgba(255, 255, 255, 1.0);
  border-top: 0.3px solid #e6e6e6;
  position: fixed;
  left: 0px;
  bottom: 0px;
  margin: auto;
}
#Icons ul{
  width: 100%;
  height: 100%;
}
.icon{
  list-style-type:none;
  width: 60px;
  margin-bottom: 5px;
  display: inline-block;
  justify-content: space-around;
}
.icon a{
  display: block;
  text-decoration: none;
}
.icon svg{
  width: 30px;
  height: auto;
  margin-top: 2px;
  stroke: #222427;
  stroke-width: 6px;
  fill: none;
}
.icon p{
  text-align: center;
  cursor: pointer;
  margin: auto;
  font-size: 9px;
  color: #222427;
}
}

試したこと

■パソコン用デザインと同じCSSにしてみましたが、変化はありませんでした。
■ファイル名の再確認もしました。

Comments

[m.ts10806]

cssファイルの中にstyleタグは書けませんよ。エラーはでないですが

[Lhankor_Mhy]

当方で試したところ、リンク先に飛びました。
つまり、「スマホ・タブレット用のデザインにするとリンク先に飛びません。」という問題が再現しません。

https://jsfiddle.net/Lhankor_Mhy/02oksLg1/
NULEさんの環境では↑のコードで問題は再現しますか？

再現するのであれば、環境の問題かと思います。問題が再現するであろう環境をご提示ください。
再現しないのであれば、ご提示いただいていないコードに問題があるかと思います。問題が再現するコードをご提示ください。

Answer 1

CSSの視点でよくあるのが、別の場所にある透明な要素が上にかぶさっていて、クリックができていない、というものです。

いったんスマホサイズなどでも以下のようにhover属性の指定をつけてみて、
PCで表示し、要素をホバーできているかをチェックしてもいいかもしれません。
ホバーができていなければクリックもできないはずなので。

.icon:hover {
  background: #f00;
}

Comments

[NULE]

お忙しい中、ご回答いただきありがとうございます。
ご提示いただいた方法で試しましたが、hoverができたので
要素が当該の要素の上に重なっていないようでした。

同じようなコード、スタイルがあるのですが、そちらはクリックするとリンク先に飛ぶので、何が問題なのか解決に至っておりません。