meta name format detection content telephone no

Apple-specific meta tags are described here.

Apple-Specific Meta Tag Keys

apple-mobile-web-app-capable

Sets whether a web application runs in full-screen mode.

Syntax

If content is set to yes , the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.

You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

Availability

Available for iOS.

Support Level

apple-mobile-web-app-status-bar-style

Sets the style of the status bar for a web application.

Syntax

This meta tag has no effect unless you first specify full-screen mode as described in apple- apple-mobile-web-app-capable .

If content is set to default , the status bar appears normal. If set to black , the status bar has a black background. If set to black-translucent , the status bar is black and translucent. If set to default or black , the web content is displayed below the status bar. If set to black-translucent , the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default .

Availability

Available for iOS.

Support Level

format-detection

Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS.

Syntax

By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature.

Support Level

viewport

Changes the logical window size used when displaying a page on iOS.

Syntax

Use the viewport meta key to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.

For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing a Safari on iOS-specific web application, you should set the width to the width of the device.

Читайте также:  com surrogate не отвечает

Table 1 describes the properties supported by the viewport meta key and their default values. When providing multiple properties for the viewport meta key, you should use a comma-delimited list of assignment statements. Follow these rules when setting multiple properties:

Do not use a semicolon as a delimiter.

A space may work as a delimiter, but a comma is preferred.

For numeric properties, if the value contains a nonnumeric character but starts with a number, then the number prefix is used as the value. For example, 1.0x is equivalent to 1.0 and 123×456 is equivalent to 123 . If the parameter doesn’t begin with a number, the value is 0 .

When referring to the dimensions of a device, you should use the constants described in Table 2 instead of hard-coding specific numeric values. For example, use device-width instead of 320 for the width, and device-height instead of 480 for the height in portrait orientation.

You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0 , Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0 , then set both of these properties.

For example, to set the viewport width to the width of the device, add this to your HTML file:

To set the initial scale to 1.0 , add this to your HTML file:

To set the initial scale and to turn off user scaling, add this to your HTML file:

Use the Safari on iOS console to help debug your webpages as described in the Safari Web Inspector Guide. The console contains tips to help you choose viewport values—for example, it reminds you to use the constants when referring to the device width and height.

Support Level

Table 1 Viewport properties

The width of the viewport in pixels. The default is 980 . The range is from 200 to 10,000 .

You can also set this property to the constants described in Table 2 .

The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels.

You can also set this property to the constants described in Table 2 .

The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties.

You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no . Zooming by the user is also limited by the minimum-scale and maximum-scale properties.

Specifies the minimum scale value of the viewport. The default is 0.25 . The range is from > 0 to 10.0 .

Specifies the maximum scale value of the viewport. The default is 5.0 . The range is from > 0 to 10.0 .

Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes .

Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field.

Table 2 Special viewport property values

The width of the device in pixels.

The height of the device pixels.

Copyright © 2014 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2014-07-15

Оптимизирую HTML код, номер телефона обернут в ссылку:
+7 900 777 333 22

Вот что хочу видеть вместо ссылки, кликабельно:

нужно избавиться от ссылки, но что бы было кликабельно на мобильных телефонах, причем довольно на многочисленных устройствах.

  • Вопрос задан более трёх лет назад
  • 1032 просмотра

Если же ваша задача — оптимизировать, то убирая ссылку, вы делаете только хуже. Есть определенные стандарты и поведения браузеров, следуйте им.

  • 2019-11-21
    • 28
    • Августаа
      2017

Доброго времени суток. ��

Если вы занимаетесь версткой, то рано или поздно столкнетесь с проблемой автозамены телефонных номеров в ссылки на мобильных устройствах. То есть, если в написали на сайте номер обычным текстом, то мобильные браузеры Android и iOS (Safari) автоматически преобразовывают обычный текст в ссылку. Делается это для удобства пользователя, чтобы он смог сразу позвонить, но иногда автозамена работает не корректно и не весь номер выделяется. Так же преобразование номера в ссылку влечет за собой изменение стилей номера. Вы могли задать какие-то CSS стили элементу с номеров, а преобразование, естественно сделает так, что номер станет просто синим подчеркнутым текстом. Как понимаете, это может не совсем корректно отобразится среди остального дизайна сайта.

Избавится от такого эффекта можно несколькими способами. Можно просто самому сделать из телефона ссылку и задать ей нужные стили, а путь ссылки указать используя :tel. Если у вас был просто номер +1234567890. То лучше его сделать таким:

Далее просто добавляете стили для класса tel_link и получаете красивый вид номера на всех устройствах. К тому же пользователи могут нажать на него и сразу же позвонить. Такой способ, как по мне, самый правильный и облегчает жизнь посетителям сайта, для которых он собственно и делается.

Но, бывает так, что номеров на сайте много или нет времени переделывать их на ссылки, ну или просто ссылки вам не хочется делать, то можно воспользоваться МЕТА-тегом. Добавляете его к другим мета тегам вашего сайта в шапке и все.

Данный тег запретит устройствам работающим на iOS(iPhone / IPod / IPad) и Android делать из номеров ссылки. Так же можно еще добавить мета-тег для устройств — BlackBerry

Какой способ выбрать — решать вам.Но использовать один из них придется, если вы хотите корректное отображение всех элементов сайта на любом устройстве и избавить себя от проблем, что могут возникнуть.

На этом все, спасибо за внимание. ��

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂

Оцените статью
Добавить комментарий

Adblock detector