Как использовать изображения вместо простого текста в качестве ссылок для мобильного сафари на iOS?

Question

Я испытываю проблемы с использованием изображений вместо простого текста в качестве ссылок для мобильного Safari на iOS5, протестированного на устройстве.Я попробовал три разных протокола связи, tel: mailto: и http: и описал проблему для каждого из них ниже.

<a href="tel:1234"><img src="images/phone.jpg" alt="" /></a>

Не работает в iOS5, выдает ошибку Cannot Open Page, но работает с текстомкак ссылка.

<a href="mailto:foo@bar.com"><img src="images/mail.jpg" alt="" /></a>

Работает и запускает почтовое приложение.

<a href="http://www.mysite.com"><img src="images/home.jpg" alt="" /></a>

Работает как положено.

Однако , 'Событие touch-and-hold ', которое всплывает с обычными текстовыми ссылками, работает по-разному для изображений.Для почтовых ссылок это Новое сообщение / Добавить в Контакты / Копировать / Отменить, а для телефонных ссылок - Звонить / Добавить в Контакты / Копировать / Отменить.Со ссылками на изображения всплывающее окно предоставляет параметры «Открыть / Сохранить изображение / Копировать / Отменить» для ссылок mailto и tel, при этом параметр «Открыть» не работает для телефонных ссылок «потому что адрес недействителен».

ДляНа моем веб-сайте я хотел бы указать свои адреса электронной почты и телефона, а также возможность отправлять их по почте / звонить напрямую или добавлять их в контакты.Я нашел связанный и нерешенный вопрос здесь: Наберите номер с помощью Phonegap в IPhone

Любая помощь будет принята с благодарностью.

Любопытно, что при сохранении на главном экране наiOS-устройство, работающее как веб-приложение, жест касания и удержания не дает всплывающих окон для ссылок на изображения, тогда как текстовые ссылки работают нормально.(Чтобы веб-приложение можно было запускать как веб-приложение, я добавил следующий код в начало страницы:)

<meta name="apple-mobile-web-app-capable" content="yes" />

Может кто-нибудь воспроизвести это поведение, используя приведенную выше ссылку, и есть подсказки, которыеверсии iOS могут быть затронуты?Я тестировал его на iPodTouch iOS 5.0.1 и iPad iOS 4.3.3.Спасибо.

Answer 1

Я заметил эту же проблему. Чтобы обойти это, я использовал CSS background-image вместо тега img:

<style type="text/css">
    .tel { 
        width: 102px; 
        height: 32px; 
        display: inline-block; 
        background: url(phone.png); 
    }
</style>

<a class="phone" href="tel:+1-000-000-0000"><span class="tel"></span></a>

Обратите внимание, что я специально оставляю нет пробелов внутри тега a, потому что в противном случае iPhone отображает его рядом с изображением (оно отображается для меня как пустое подчеркивание, но это зависит от вашего собственного CSS). ).

Answer 2

Я не могу воспроизвести ошибку связи с вашим изображением в iOS 5.0.1.В частности, я поместил следующую строку в веб-страницу на Apache:

<p>This is a test of a tel link: <a href="tel:2060000000"><img src="/iPodTouch_s4.png"></a></p>

При касании к графическому изображению открывается диалоговое окно телефона с параметрами Отмена и Вызов.на графических подарках Открыть в телефоне, сохранить изображение и скопировать;При нажатии на кнопку «Открыть в телефоне» открывается диалоговое окно телефона, снова с опциями «Отмена» и «Вызов».

Единственный способ воспроизвести ваш опыт - это неправильно набрать обозначение протокола.Например, это воспроизводит все, что вы упомянули (обратите внимание на 1 вместо строчной буквы L в href):

<p>This is a test of a tel link: <a href="te1:2060000000"><img src="/iPodTouch_s4.png"></a></p>

Вы уверены, что в ссылке нет опечаток или других проблем?