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移到视口的前面，这将使它们可被单击。

图片链接在移动设备上不起作用

2 个答案: