Как сделать ссылку изображения на номер телефона только на мобильных устройствах с помощью CSS и HTML?

Question

Вместо того, чтобы просто текст, имеющий, например

Если я <a href="tel:180">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> 

И он по-прежнему не работает, как ссылки обнаруживаются.

Answer 1

ПРИМЕЧАНИЕ: Обновлен код и все работает так, как должно быть сейчас. установите максимальную ширину 9999 пикселей.

Работа 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*/ 
} 

Надеется, что это помогает.

Answer 2

Эй, я не знаю, это то, о чем вы просите, но это может помочь. Дайте мне знать.

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

Извините, если это не то, что вы искали.

Answer 3

Удаленный мой старый ответ, потому что он был беден. Попробуйте это http://jsfiddle.net/qDUqS/

Номер телефона выглядит одинаково как на маленьком экране, так и на большом экране, но он действует как ссылка, только на меньшем экране.

Html:

<span class="phone"><img src="http://goo.gl/PdeeU" /><a href="tel:180">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; 
    } 
} 

Answer 4

Ответ очень прост, просто объявление непрозрачности "transparrency" на рабочем столе code.and скопировать код в мобильном телефоне во время установки непрозрачность 1.