2

例如，不仅仅是文本

如果我这样做， <a href="tel:18001234567">1-800-123-4567</a>那么它将在台式机上损坏。

如果我这样做(800) 123-4567，它将在桌面上显示为数字，但应自动成为 Android 和 iPhone 上的链接

但是，如果我想制作这样的图像：

电话的假按钮

是否有解决方案，可能使用媒体查询或任何其他方式。我可以在桌面和移动设备上显示此图像，但在移动设备上作为按钮显示？这适用于电子邮件，因此只有 HTML/CSS 选项。

根据我得到的答案，它也不起作用：

@media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; }  /* show it on small screens */
#my-link { display: none; }  /* hide it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 1024px) {
#my-image { display: none; }   /* hide for all below 401px*/
#my-link { display: block; }   /* show for all above 401px*/
}

随着：

<div id="my-image">
<a href="tel:1-800-328-4766">Call Now!</a>
</div>

<div id="my-link">
Call 1-800-328-4766
</div>

它仍然无法正常工作，两个链接都显示出来了。

4

4 回答 4

4

删除了我的旧答案，因为它很差。请试试这个http://jsfiddle.net/qDUqS/

电话号码在小屏幕和大屏幕上看起来都一样，但它就像一个链接，只是在小屏幕上。

html:

<span class="phone"><img src="http://goo.gl/PdeeU" /><a href="tel:18001234567">1-800-123-4567</a><p>1-800-123-4567</p></span>

CSS：

.phone
{
    background-color: #152C48;    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
}
a
{
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    padding: 0px;
}
img
    {
        vertical-align: middle;
        width: 24px;
        height: 24px;
        padding: 0px;
    }
p
{
    display: none;
    color: #ffffff;
    padding: 0px;
}

@media only screen and (min-width: 480px) and (max-width: 1920px)
{
    a
    {
        display: none;
    }
    p
     {
        display: inline-block;
     }
}
于 2013-06-05T18:39:15.357 回答
0

注意：更新了我的代码，现在一切正常。将最大宽度设置为 9999px。

工作JSFIDDLE

制作一个 div 并将图像放入该 div 中：

<div id="my-image"></div>

CSS看起来像这样：

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-image { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 9999px) {
  #my-image { display: none; }   /* hide for all below 401px*/
}

对于您的按钮/链接，您可以执行相同的操作，但除此之外：

<div id="my-link"></div>

CSS看起来像这样：

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-link { display: none; }  /* hide it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 9999px) {
  #my-link { display: block; }   /* show for all above 401px*/
}

希望能帮助到你。

于 2013-06-05T13:07:30.643 回答
0

答案很简单，只需将不透明度“透明度”添加到桌面代码。然后将代码复制到移动设备，同时将不透明度设置为 1。

于 2015-01-04T12:14:11.633 回答
0

嘿，我不知道这是否是您要求的，但它可能会有所帮助。请让我知道。

http://www.wpbeginner.com/wp-tutorials/how-to-add-clickable-phone-numbers-for-smartphones-in-wordpress/

抱歉，如果这不是您想要的。

于 2013-06-05T13:47:36.150 回答