圖片鏈接在移動設備上不起作用

Question

當我在Samsung手機上打開頁面時，圖像上的鏈接不起作用，但是當我在PC上嘗試該鏈接時，一切正常。

另外，如果我刪除img部分上的id="profileimage" ，則鏈接有效。 你可以幫幫我嗎？

  <style>
  ol {padding: 0; margin: 0; list-style-type: none;}
  #leftpanel{margin-top: 5%;}
  #enjoy{text-align: center;}
  @media only screen and (max-width: 767px) {img {width: 30%; height: auto; margin: 0; padding: 2px;}}
  @media only screen and (min-width: 768px) {img {width: 19%; height: auto; margin: 0; padding: 2px;}}
  </style> 

      <script>
    $(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip();   
    });
    </script>
</head>

<div class="col-sm-12 col-md-6">
    <ol class="hidden-lg hidden-md col-sm-12 col-xs-12" align="middle">
        <li>
        <?php while ($r1 = $q->fetch()): ?>
            <a href="<?php echo $r1['id'];?>"> <img class="img-rounded" src="<?php echo $r1['pic'];?>"></a>
        <?php endwhile; ?>
        </li>
        <li>
        <?php while ($r2 = $q2->fetch()): ?>
            <a href="<?php echo $r2['id'];?>"> <img class="img-rounded" src="<?php echo $r2['pic'];?>"></a>
        <?php endwhile; ?>
        </li>
        <li>
        <?php while ($r3 = $q3->fetch()): ?>
            <a href="<?php echo $r3['id'];?>"> <img class="img-rounded" src="<?php echo $r3['pic'];?>"></a>
        <?php endwhile; ?>
        </li>
    </ol>

Answer 1

<ol class="hidden-lg hidden-md col-sm-12 col-xs-12" align="middle">

當我刪除class="hidden-lg hidden-md col-sm-12 col-xs-12"部分時，它已修復。 謝謝您的幫助

Answer 2

查看您的代碼后，我相信我已經找到了問題和解決方案。 您的圖片似乎被頁面上的其他元素遮住了。 添加style="position:relative; z-index: 10;" 到包含移動圖像的div中，以將div移到視口的前面，這應該使它們可以單擊。