Мобильный Safari умеет различать на сайтах телефоны в окружении другого текста. Это удобно, потому что тапаешь по номеру на веб-странице – и сразу открывается окошко с предложением сделать исходящий вызов абоненту. Однако многие веб-мастера усложняют жизнь потенциальным клиентам. Давайте внесем ясность, как делать правильно.
Как надо
Запомните правило. Если вы верстаете контактную форму, то префикс +7/8, код (495) и сам номер 123-45-67 должны быть написаны единым стилем без сокращений. Вот так:
Вы можете выделять цифры цветом, увеличивать или уменьшать, но чтобы это относилось ко всему номеру одновременно.
Неправильно
Телефон дан без префикса +7/8
Когда на сайте пишут (499) 123-45-67 или (499) 1234567, то iOS предложит вам набрать номер 4991234567. По такому нельзя никуда дозвониться. Мода на убирание префиксов пришла из печатной продукции. Но там это вынужденный шаг, сам с этим сталкивался, когда верстаешь рекламный разворот крупной торговой сети с указанием всех телефонов магазинов, а контактный врез ограничен по площади. Первым делом мы резали +7 и 8, оставляя только код + номер.
Вебмастера это переняли. Однако, когда в 2009 году айфон стал различать телефонные номера на сайтах, то отсутствие префикса вело к неправильному набору.
Телефон дан картинкой
В стиле 2000-х. У некоторых веб-мастеров не хватает знаний в CSS, чтобы координаты контактной формы смотрелись во всех браузерах одинаково, поэтому контакты делают в виде картинки и заверстывают в общий макет. Вот только Safari не умеет распознавать подобные изыски. Клиент на входе в магазин получает подножку.
Код и телефон написаны разными стилями
Противоположный случай – когда верстальщик отлично владеет CSS и хочет сделать акцент на номере, оставив при этом префикс с кодом. Смотрится красиво, но айфон не поймет мотивов веб-мастера. Избегайте таких случаев.
Так же код часто пишут одним цветом, а номер другим. Тоже в топку, если хотите дружить с потенциальными клиентами, ищущих в интернете информацию о фирме прямо с телефона.
Повторюсь еще раз. ПРЕФИКС + КОД + ТЕЛЕФОН должны быть набраны вместе в едином стиле:
+7 812 987-6543 +7 (495) 1234567 8 8790 23-23-09
(5 голосов, общий рейтинг: 4.40 из 5)
86 комментариев
Форум →Поддерживаю!
+я поддерживаю!
+бесконечность! Вымораживает, когда без +7/8 указан номер:)
@Zork, Это точно. Что говорить нам, людям живущим под кодом +38 :)))))
@Наталия Чеснова, вот только +380
@AlexSmith, тогда и в России: +73, +74, +75, +78, +79. :)
@Power & Control, в РФ код страны только +7 без всяких дополнительных цифр, не путайте людей
@Brawer, нет. Первая цифра региона тоже берется в префикс (от всех этих 916, 905 и т.д. би этих 812, 495, 499 и т.д.). В Украине тогда просто +38.
В Украине цифра «0» и кодов города перекочевала в +38 и получилось +380. Веря Википедии у нас тоже, то есть как я и написал. А так да, +7.
из кода города перекочевала *
@Power & Control, Ммм.. если бы код Украины был +38, то телефонный номер +38 (124) 123-45-67 (на самом деле +381 (24) 123-45-67) должен относиться к Украине. Но он почему-то относится к Сербии и Черногории, у которой код +381. Так что ошибочка у вас.
@angorius, да нет никакой ошибки, у тебя в примере код 124, а не 024. Поэтому правильно, кмУкраине не относится. Был бы 024 было бы +38 (024) 123-45-67 , то есть +380 (24) 123-45-67. Говорю же, цифра ноль перекочевала. У Украины все коды начинались с нуля.
@Наталия Чеснова, у нас-то как раз с этим проблем нет.
Айфон спокойно наберет 044-123-45-67, к примеруб и вы позвоните куда хотели.
Люди которые далают серьёзные сайты всё это знают, а школьники эту статью не прочитают ))
@PAHAN, Школьники как-раз и прочитают. :))
+++++
+1
Авторы статьи не знают по ходу, что называется в среде разработчиков и программистов костылем)
@Jonny_Ive, расскажите нам всем.
@Jonny_Ive, фраза «первый костыль уже вставлен» в каждом примере — ещё хуже чем номер без 7-ки :)
и да, какое-то странное у них понимание «костыля»
@Jonny_Ive,
+1
это не “костыль”, а “антикостыль” получается ))
@Jonny_Ive, Вы же в курсе, что на программистах мир клином не сошёлся, правда? :)
Хотя тут, на мой взгляд, уместнее было бы выражение “палка в колёса”.
@Rezon, свет не сошёлся, свет) Сегодня день перепутанных идиом)
Если бы Apple добавила в iOS возможность редактировать номер (а не только вставлять из буфера), то было бы вдвойне хорошо.
@RayGreen, Вот это люто поддерживаю! Почему не могу допилить такой простой функционал, абсолютно непонятно!!
<a href=”tel:+74951234567″>Звоните нам</a>
Обязательно нужно указывать tel.
«Когда на сайте пишут (499) 123-45-67 или (499) 1234567, то iOS предложит вам набрать номер 4991234567.»
Когда на сайте пишут (499) 123-45-67 или (499) 1234567, хочется сначала засунуть программистам сайта руки в одно место, а потом написать в Apple с огромнейшей просьбой добавить возможность редактирования номера. Но первое больше. =D
@robert_msk, Когда люди приписывают подобные ошибки программистам, хочется засунуть мозг этих людей в одно место.
Я вам даже больше скажу, есть специальный html тег tel для того, что бы любое устройство понимало номер.
Позвони мне, позвони
Наконец-то хоть один большой ресурс прокричал об этом. Спасибо! Давно хочу оторвать руки верстальщикам, которые ставят телефоны на сайтах без префикса, обходясь только DEF.
@ChinChilla, а АВС вообще зачастую не указывают…
@ChinChilla, ресурс прокричал, да как-то криво. предложили лишь одно решение — писать полностью номер без разбиения, хотя можно обойтись верной подстановкой ссылки.
Более того, если бы подошли к вопросу грамотно, то описали бы пример, как сделать эту ссылку «устройство-зависимой», то есть, допустим, при тапе с айфона — предлагать позвонить; при клике с компа или тапе с айпада — открывать форму обратной связи и тд.
@i.band, нет уж. Может быть еще Артуру основы php тут преподавать? Статья абсолютно соответствует направлению всего сайта.
@i.band, не надо форму обратной связи, ибо мой jabber умеет набирать номер со стационарного телефона из браузера не хуже IOS :)
Истово плюсую!
Задрали уже кухонные дизайнеры.
Правила не вебмастера, но яблочника. Написание номера рассчитывают на удобное восприятие и запоминание пользователем, а не на корректную работу с одной моделью телефона, которая этот самый номер даже не может правильно воспринять.
Это как писать статью о необходимости верстки под ИЕ6.
@shmonstre, номер без префикса в международном формате – неполный. Эппл тут совсем ни при чем.
Представьте, что вы приходите в магазин и хотите купить… да тех же яблок! И на всех сортах написано: “Яблоки” – Цена 100р/кг, “Яблоки” – Цена 30р/кг, “Яблоки” – Цена 200р/кг.
Яблоки разные, но Вы не понимаете, почему эти стоят столько-то, а эти – столько-то. Сорт-то не обозначен!
@shmonstre, дело не в яблоке, сейчас почти любой телефон распознает номера, и м…ки, пишущие номера как придется, задрали…
Претензия на счёт недозваниваемых телефонных номеров должна прямиком отправиться в APPLE.
Сколько лет айфонв на рынке? Вот ровно столько лет яблочники тупят и не могут добавить в приложение ТЕЛЕФОН простейшую функцию – редактирование набранного телефонного номера с произвольной позиции, а не только последнего введенного символа.
Функция на 5 центов работы, есть в _любом_ андройде, есть в нокии и ещё мильёне телефонов.
В айфоне – нет!
Я уже писал в саппорт APPLE, присоединяйтесь, напишите и вы.
Дизайнеров всех не исправить но облегчить себе жизнь можно попробовать.
@max_im_50, Молодцом!
О да! Слава богу хоть кто-то заговорил об этом громко! :))))
Артур Малосиев, прекрасная заметка. Один большой минус – везде в тексте разные телефоны. А ведь мог быть один, но нужный рекламодателю ;)
@A1eksey, :D :) телефон саппорта APPLE !
@max_im_50, хотя бы :)
присоединюсь к комментаторам, рекомендующим ссылку tel:
это гораздо правильнее, чем уродовать дизайн сайта совершенно ненужными “плюс семь”
Chrome сам добавляет +7/8 по крайней мере на android
Это на хабре надо написать и закрепить наверху ;)
Артур, пропустили слово “отсутствие”:
“…когда в 2009 году айфон стал различать телефонные номера на сайтах, то ОТСУТСТВИЕ префикса…”
Вроде банально, но имеет место быть. Когда сталкиваешся, то весьма неудобно его копировать и дописывать
Мне идея писать восьмерку не нравится. Тогда нельзя позвонить, находясь в другой стране. А в остальном – полностью поддерживаю.
Хороший, годный совет.
Мне нравится, как вы относитесь к деталям.
Спасибо.
+1000 очень нужно! бесит когда не правильно написан номер! тупо не звоню, ищу других….
Хорошие ребята пишут джаваскрипт, который сам подставляет tel:+7 в код, только на Айфоне и только когда надо.
@vanyaklimenko, а ещё хорошие ребята подчёркивают ссылки.
Спасибо Артуру, исправили у себя!
А то как то такие мелочи пропустили, ибо думали про восприятие человека номера тлф, а не ипхона, но всетаки ипхон перевесил, сделали 8 (ХХХ) ХХХ-ХХ-ХХ, а было 8-ХХХ-ХХХ-ХХ-ХХ. Протестили через сафари, действительно, номер тогда подчеркивается и набирается без проблем.
@iPhone5XXXL, Вообще-то есть российский стандарт: +N (NNN) NNN-NN-NN. Если бы все следовали ему, никаких трудностей бы не было.
@SSDDRR, ага, проходили уже -звонят и спашивают-А где плюсик (+) на мобиле найти!? Отсюда и отказались от +7 в пользу 8ки.
@iPhone5XXXL, Это не шутка? Вот дураки же бывают…
@iPhone5XXXL, Префикс “8” это неверно, так как в разных странах выход на междугороднюю и международную связь осуществляется через разные префиксы. Поэтому надо просто давать абсолютный номер “+N (NNN) NNN-NN-NN”.
@SSDDRR, +7 как международная связь, но нам этого не надо, только РФ, а у нас 8мь.
@iPhone5XXXL, в том виде, в котором вы сделали (со скобками), восприятие номера еще лучше.
Извините, но яблоку пора бы вставить в софт функцию набора номера “изменить и вызвать” , эта функция есть во многих телефонах.
молодца +1
Ну наконец-то кто-то написал про эту тему! Давно пора. Владельцам сайтов, особенно коммерческих, пора понять, что телефоны на сайте должны быть указаны так, чтобы сразу можно было звонить по клику. Действительно, очень неудобно и злит, когда этого нет. И очень комфортно, когда есть.
Поддерживаю. Не раз материл таких верстальщиков, а писать им время тратить – тоже не хочется, проще новый сайт открыть)
А ещё можно почитать документацию:
https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html
и использовать какие угодно стили.
@nopox, спасибо за полезную ссылку
Потому, что первый костыль уже вставлен.
Впервые встретился с этой проблемой в 2007 г на своем сайте ))
Удивительно, но на многих сайтах проблема до сих пор актуальна!
Несколько компаний вот так и потеряли меня как клиента.
Артур, спасибо! Поправили =)
Давно уже всем заказчикам говорю, что код +. обязателен даже в наружке
У кого руки с головой не из ЖО растут, те уже давно в теме.
Да это не только в России, у нас с +61 тоже все тяжко :(
+++автору) на днях жене говорил, бесит что с половино сайтов фиг позвонишь! Приходилось все в заметки копировать!
Артур, как вы думаете, силами айфонс-ру :) можно донести коллективную просьбу в Apple: “допилите пожалуйста телефонные функции, добавьте редактирование набранного номера”?
Благое дело ждёт своих героев :) .
Российский офис Apple нас может и читает, а вот там, в Купертино – вряд ли :) Максимум – Ирландия.
В Российский офис, в Ирландский, в Купертино, хоть в спортлото написать! Шестой айфон не за горами а крошечную функцию добавить не могут.
Замечу, у нас культура деловой переписки от вэб-дизайна ушла недалеко. В почте телефоны тоже пишут как попало.
Я часто на кривое написание номера натыкаюсь, а народ у нас сидит в основном на андройде, специально проверил – у всех есть редактирование номера! Доколе?! :)
Когда телефон указан на сайте без +7, приходится жать вызов, потом сброс, заходить в список вызовов, оттуда номер добавлять в контакты, а там уже с помощью редактирования добавлять +7 и звонить. Как вариант можно запомнить номер и набрать вручную, что тоже жутко неудобно :)
Отличная заметка!
Однако как бесит такое кривое написание номеров на сайтах, также бесит и отсутствие возможности редактирования телефона при наборе!
Я тут с удивлением обнаружил, что если телефон указан без + но с префиксом всё равботает нормально. Айфон сам подставляет плюс.
То есть номер 74951234567 кликабелен и набираем.
iOS 6.0.1
При звонке в какую-нибудь организацию иногда возникает необходимость сразу набрать основной и добавочный номер. Эта функция реализована на iPhone, правда, хорошо спрятана от посторонних глаз. После набора основного номера нажмите звёздочку (*) на несколько секунд, пока в поле набора номера не появится запятая. После неё вводите добавочный номер.
Кстати, запятых в номере может быть несколько подряд – каждая из них добавляет двухсекундную паузу при наборе номера.
Если на сайте стоит скрипт против копирования текста, то номера не кликабельны вовсе.
А как оформить последовательность цифр на сайте так, чтобы айфон не распознавал их как номер телефона?
@Sergey Gernichenko, наверное надо копать в сторону атрибута rel
вообще если сделать телефон в виде ссылки (a href=””…), то можно хоть картинкой вставлять, главное в href атрибуте прописать tel:8495999999, а саму ссылку можно стилизовать как душа пожелает
Нашли орфографическую ошибку в новости?
Выделите ее мышью и нажмите Ctrl+Enter.Как работает диктовка в iOS 16. Включаем автоматический ввод и пунктуацию
Почему возникает ошибка «SIM-карта недействительна» на iPhone
Как на iPhone узнать значение любого смайла эмодзи
Что делать, если на iPhone пропало приложение Камера
Что делать, если iPhone показывает уведомление «Слабая защита Wi-Fi»
Подходят ли запчасти от iPhone 5/5S к iPhone SE?
Как понять, какой Apple Pencil выбрать для iPad
Почему в macOS Ventura не синхронизируются сообщения с iPhone