为移动设备创建链接的正确方法是什么？答案

【问题标题】：What is the proper way to create a link for mobile devices?为移动设备创建链接的正确方法是什么？
【发布时间】：2015-01-18 07:15:28
【问题描述】：

所以我有一个有趣的问题，我似乎无法弄清楚发生了什么。我从我最喜欢的地方之一购买了一个移动主题。主题效果很好，除了一个区域。右上角有一个图标，允许用户点击它，它会显示一些社交媒体分享图标，然后用户应该能够点击他们选择的图标并在适当的社交网站上分享。

在任何浏览器中，链接似乎都可以正常工作，但是当我使用我的 Droid 或平板电脑时，虽然显示/隐藏社交图标可以正常工作，但实际点击图标并共享链接的能力却没有。

这是该部分的代码：

<div class="shareDialog shareDialogMenu">
<div class="shareDialogArrow"></div>
<div class="shareDialogContent">
     <ul class="shareDialogIconList">
        <li><a href="mailto:?subject=Subject&body=Content"><div class="shareDialogMail"></div>Mail Link</a></li>

        <li><a href="http://m.facebook.com/sharer.php?u=<?php echo urlencode(curPageURL()); ?>" target="_blank"><div class="shareDialogFb"></div>Share Link</a></li>

        <li><a href="https://twitter.com/share?text=<?php echo urlencode($row['headline']); ?>&url=<?php echo urlencode(curPageURL()); ?>" target="_blank"><div class="shareDialogTwitter"></div>Tweet Link</a></li>
    </ul>
</div>
</div>

这些链接实际上在社交网络上、在任何浏览器中都可以正确共享，但在移动设备上却没有，而且链接结构似乎是标准的 a href 标记。但我很困惑为什么实际的点击在移动设备上不起作用。感谢您的任何想法或新的眼睛。

谢谢。

【问题讨论】：

你是在 Chrome 还是其他浏览器中测试过？？
我已经在桌面的 Chrome 和 Firefox 中对此进行了测试，并在 droid 手机和 droid 平板电脑上进行了测试。在桌面浏览器上，链接可以工作，但在手机/平板电脑上却不行。
我指的是移动版浏览器...
我无法在我的 Droid 上安装 Chrome，猜测操作系统已过时或其他原因。我设备上的浏览器是AppleWebkit/533.1 Version/4.0 Mobile Safari
你能安装 Opera Mobile 或类似的东西吗：mozilla.org/en-US/firefox/android 进行测试

标签： android jquery css mobile

【解决方案1】：

我认为问题可能出在 a 元素中的 div 元素上。

divs 是块级元素，不能驻留在像as 这样的内联元素中。尽管您可以使用 CSS 将有问题的 div 设置为 display: inline;

有些浏览器允许无效使用块和内联元素，有些浏览器会在 div 启动后简单地关闭 a 元素，这意味着您的文本实际上不是链接。

另一种解决方案是使用span 而不是div。

希望这是有道理的，可以帮助您解决问题。

【讨论】：