Iphone html head title

Верстка сайта под iPhone

категория Веб технологии
дата	07.01.2013
автор	svlanavk
голосов	1

Шаг 1. Подключение аналога favicon.ico

Когда пользователь создает ссылку на сайт в виде иконки в SpringBoard, iPhone автоматически формирует картинку из скриншота страницы. В результате почти всегда получается неразборчивая картинка, которая на гордое звание «иконки для iPhone» никак не подходит.
Чтобы подключить такую иконку необходимо прописать в заголовке страницы тег:

и добавить соответствующую картинку img/iphone_icon.png размером 57х57 пикселов. iPhone сам добавит скругленные углы и полукруглый блик, сделает иконку похожей на остальные.

Шаг 2. Определение устройства iPhone

Для начала необходимо определить iPhone. В коде ниже показано как с помощью PHP определить iPhone и применить к нему необходимые действия. Для iPhone можно использовать и общие стили разметки, однако, некоторые специфичные моменты разметки нужно определить в специальном файле стилей для девайса. Кроме этого нужно еще определить специальный, укороченный, мета-тег title.

Приведенный выше код просто определяет, использует ли агент пользователя iPhone. Необходимо поместите этот кусок кода в самой верхней части страницы, перед любой другой частью разметки.
Можно использовать другой вариант с javascript:

if (navigator.userAgent.indexOf(‘iPhone’) != -1)

Для того чтобы использовать какой-то код только для iPhone нужно обернуть код в условие предоставленное ниже:

Шаг 3. Сохранение в HomeScreen укороченного заголовка страницы

Для того чтобы при сохранении пользователем сайта на домашний экран iPhone название домашней страницы не было довольно длинным, можно сделать укороченный title с использованием следующего кода:

Короткий заголовок только для iPhone

Обычный заголовк

Шаг 4. Полноэкранный режим

Добавления данного meta тега дает возможность того, что сайт, будучи запущен по иконке из SpringBoard, будет похож на отдельностоящее приложение (не будет отображаться ни строка ввода адреса / поиска, ни нижний тулбар). Останется только верхняя полоска статуса.

Замечание:
Навигация на сайте должна быть самодостаточной, потому как кнопки Back / Forward браузера уже будут не видны.

Шаг 5. Адаптация диапазона масштабирования или отмена автоматической коррекции масштабирования

Если сайт изначально отображается в iPhone не на полный экран, то можно подобрать начальный масштаб отображения, максимальный масштаб отображения, а также при необходимости, запретить масштабирование пальцами вообще — пинч-Zoom (если весь сайт при выбранном масштабе умещается на экране по горизонтали), который предлагает мобильный Safari:

Вместо использования meta тега можно использовать следующий CSS код, который отключает встроенную эвристику мобильного Safari:

html <
-webkit-text-size-adjust: none;
>

Шаг 6. Добавляем CSS-стили, предназначенные только для iPhone

Для того чтобы подключить отдельный общий CSS файл, который будет восприниматься только на iPhone, нужно прописать тег link:

Замечание:
Необходимо критически оценить вид сайта на iPhone и посмотреть, какие элементы навигации и контента можно увеличить, чтобы по ним легче было попадать пальцем. Также, какие блоки можно на iPhone вообще скрыть или уменьшить, и можно ли привести сайт к одноколоночной верстке, для которой легче подобрать масштаб.
Разработка полноценного стиля сайта под iPhone — занятие ответственное, но какие-то моменты можно подправить достаточно быстро.

Можно сделать и другим способом, не подключать еще один внешний CSS файл для iPhone, а дописать их в основной файл со стилями.

Для этого необходимо в первую очередь убедиться, что главная ссылка на стили вашего сайта не имеет media атрибута:

В дальнейшем модно распределить медиа атрибуты внутри CSS файла. Все, что необходимо сделать, это подключить отдельные @media правила.

Общие стили не нужно определять никаким типом. Для печатных стилей используйте объявление @media print, например:

и так же для других медиатипов.

Это даст нам возможность положить стили для iPhone непосредственно в конце главного файла стилей:

Теперь любой CSS перед объявлением декларации разрешения будет использоваться на всех типах устройств, а все что ниже декларации будут использовать устройства с максимальным размером экрана 480px (например, iPhone).

Что нужно помнить!
Есть несколько ключевых моментов, которые используются при разработке CSS для iPhone:

• Избегать абсолютной ширины там, где возможно использовать ширину в процентах.
• Линизировать все, что это возможно, избегать плавающих блоков. Не стоит разбивать контент на колонки без крайней необходимости.

Ссылки на полезные статьи

Как сделать сайт более iPhone-совместимым за 5 шагов
http://habrahabr.ru/blogs/web_design/72612/

Пример создания мобильной версии сайта под iphone
http://www.poiser.name/codress/i-nashi.asp

Если Вам понравилась статья, проголосуйте за нее

Голосов: 1 Голосовать

Источник

Html head — используемые элементы, правильные мета теги, примеры, код

Для чего нужен HTML-тег head

Теги верхнего уровня и являются обязательными элементами веб-страницы и формируют ее структуру. В общих чертах разметка любого html-документа выглядит следующим образом:

Как видно выше, тег содержит метаданные о странице, а тег — непосредственно содержимое страницы. Информация внутри не видна пользователю (за исключением , но об этом позже), зато активно используется:

• роботами в процессе индексации вашего сайта,
• соц. сетями и месседжерами, когда кто-то шарит страницу вашего сайта,
• ну и конечно, самим браузером в процессе отрисовки страницы.

Какие теги помещаются между тегами …

В разрешается добавлять следующие теги title, meta, link, style, script, noscript, и base. Наличие любого из них является опциональным. Даже если будет пустым или вообще отсутствовать, браузер сможет отрисовать страницу, правда, выглядеть она скорее всего будет не очень.

Вот минимум, который стоит включать в каждую страницу

Обычно выглядит примерно так:

Давайте теперь более подробно рассмотрим каждый тег.

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

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

Вот некоторые рекомендации по поводу заголовка страницы:

• Следите за количеством символов (лучше не больше 50-60)
• Не борщите с ключевиками
• Помещайте основную ключевую фразу в начало заголовка

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

Существует большое количество типов метаданных, поэтому для простоты восприятия, я разделил их на основные (те, которые желательно использовать в разметке любой страницы) и второстепенные (они, конечно, тоже очень важны, но специфичны для решения определенных задач).

не имеет закрывающего тега и имеет следующие атрибуты:

• charset — кодировка страницы
• name — название метаданных, которые содержатся в данном теге
• http-equiv — формат ответа сервера
• content — само значение

Атрибуты name и http-equiv являются взаимоисключающими и не могут вместе находиться в одном теге.

Как использовать meta name viewport?

Viewport — это размер видимой области страницы. Он, понятное дело, сильно отличается в зависимости от размера экрана устройства, на котором пользователь просматривает ваш сайт.

Если вы не используете meta name=viewport в разметке страницы, то скорее всего мобильный браузер просто уменьшит ее для того чтобы впихнуть в границы экрана. Контент на странице станет трудночитаемым и пользователю придется увеличивать части страницы и бесконечно скроллить, чтобы что-то разглядеть. Не айс.

Для решения этой проблемы используйте приведенный ниже код

width=device-width сообщает браузеру о том, что ширина страницы должна быть привязана к ширине экрана устройства.

initial-scale=1.0 устанавливает начальный уровень зума.

Это все, конечно, здорово, но для того, чтобы сайт одинаково хорошо смотрелся на всех устройствах не достаточно. Нужно также максимально отказаться от фиксированных размеров элементов страницы и использовать media queries в CSS.

Обо всем этом в рамках данной статьи рассказать не получится. Обещаю посвятить теме адаптивного дизайна отдельную статью.

Это далеко не полный список того, что можно указать при помощи тега . Например, можно еще «сформировать» сниппет для шаринга страницы в соц. сетях и мессенджерах. Подробнее об этом смотрите в конце этой статьи.

Что такое meta http-equiv?

Мета-теги с атрибутом http-equiv — довольно сложная для восприятия тема. Говоря простым языком, при помощи таких тегов можно передавать браузеру информацию о том, как следует обрабатывать страницу в формате заголовка ответа сервера.

При помощи тегов с атрибутом http-equiv можно, например, обновлять страницу или перенаправлять на другую

В HTML5 большая часть meta http-equiv не поддерживается ( set-cookie , expires ).

Этот тег используется для указания связи между страницей и другими документами в сети, т.е. с его помощью можно подключать дополнительные файлы (например, CSS или фавикон).

также не имеет закрывающего тега и его параметры передаются в виде атрибутов.

Ниже приведены наиболее распространенные примеры использования тега
:

Источник

Safari HTML Reference

Supported Meta Tags

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.

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

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

Источник