Поскольку среди пользователей Рунета всё больше тех, кто заходит в сеть с телефонов и коммуникаторов, мы в Яндексе уделяем много внимания совместимости наших сервисов с самыми разными мобильными устройствами. Сегодня в России стартовали официальные продажи iPhone 3G. iPhone в России ждали давно, и многие владельцы уже успели сделать совместимые с этим телефоном версии своих сайтов. Для тех вебмастеров, кто подготовиться не успел, мы решили дать несколько советов.
- С чего начать адаптацию своего сайта под iPhone? Для начала можно просто подготовить иконку (Webclip) с логотипом сайта и при помощи специальным образом оформленного тега link указать ссылку на нее. Если пользователь захочет вынести закладку сайта на стартовый экран (Springboard) своего iPhone, среди иконок приложений появится новая иконка с подготовленным логотипом. Казалось бы — мелочь, но она дает пользователю понять, что о нем специально позаботились.
Вот, например, как выглядит иконка нашей iweather на экране iPhone. Подробнее о Webclip можно узнать на сайте Apple, посвященном web-разработке. - Всегда полезно иметь версию ресурса, ориентированную на небольшой размер экрана (скажем, 240px). Хотя даже это не дает гарантии, что сайт будет нормально показан на iPhone.
Действительно, Safari представляет собой полноценный браузер, построенный на движке Webkit, который способен нормально отображать страницы больших сайтов. Но загружая страницу, Safari старается ее масштабировать таким образом, чтобы она полностью уместилась на экране. Как результат — совершенно нечитаемый маленький шрифт и, чтобы хоть что-то разобрать, приходится увеличивать масштаб и сдвигать страницу к нужному куску текста.
Почему так? iPhone проверяет, умещается ли страница в 980px по ширине и, если не умещается, то включает масштабирование. А если умещается, то страница показывается как есть, но из расчета того, что она в ширину не 240px, на которые мы рассчитывали, а 980. К счастью, значение по умолчанию (эти самые 980px) можно изменить при помощи тега meta.
Стоит добавить в заголовки страницы такую конструкцию <meta name="viewport" content="width=240"> и все становится так, как мы и ожидали видеть.
- Если хочется сделать специальную версию под iPhone, выглядящую как настоящее айфоновское приложение (как, например, iweather.yandex.ru), пожалуй самое простое — это воспользоваться фреймворком iui, распространяемым под открытой лицензией. Этот фреймворк представляет собой библиотеку JS-скриптов и CSS-стилей, облегчающих создание страниц, имитирующих интерфейсные элементы iPhone и их поведение. Подключив его к проекту, можно сосредоточиться на разработке функционала сервиса, не отвлекаясь на нюансы верстки под iPhone.
Александр Моисеев и Александр Мартынов, отдел информационных интерфейсов