10 сниппетов для разработки сайтов под iPhone. Часть 2

Продолжим...

 
 
 

Обнаружение ориентации iPhone

В связи с тем, что iPhone позволяет своим пользователям просматривать страницы, как в портретном, так и в пейзажном режиме, вам может понадобится функционал обнаружения ориентации iPhone, чтобы бы правильно отображать страницы вашего сайта. Эта удобная JavaScript функция определяет текущую ориентацию iPhone и применяет определенный класс CSS, чтобы вы могли управлять стилем Вашей страницы. Отметим, что в этом примере, CSS класс добавляется в page_wrapper ID. Просто, замените его на требуемое имя ID (см. строку 23).

Источник: www.engageinteractive.co.uk

Применение CSS стилей только для iPhones/Ipods

Сниффинг браузера может быть иногда быть полезным, но по ряду причин, это не самая лучшая практика для обнаружения браузера. Если вы ищете чистые способы применения CSS стилей только для iPhone, вы должны использовать следующее. Вставьте этот код в ваш CSS файл.

Источник: csswizardry.com

Автоматическое изменение размеров изображения для iPhones

На последних сайтах, большинство изображения имеют ширину выше 480 пикселей. Благодаря малым размерам iPhone, есть большая вероятность того, что изображение будет 'выскакивать' из области контента. С помощью следующего CSS кода, вы сможете автоматически изменять на 100% размеры изображения веб-сайта. Так как ширина устройства максимально равна 480px, изображения никогда не будут шире.

Источник: csswizardry.com

Скрытие по умолчанию панели инструментов

На маленьком экране, например как на iPhone, панель инструментов полезна, но и занимает много места. Если вы хотите скрыть, по умолчанию, панель инструментов Safari, когда iPhone посетитель открыл ваш сайт, просто установите следующий JavaScript код.

Источник: articles.sitepoint.com

Использование специальных ссылок

Вы помните «mailto» ссылки? Они были очень популярны несколько лет назад. Этот префикс автоматически открывает клиента электронной почты, установленного на использование по умолчанию. На iPhone введено два аналогичных префикса — tel и sms. Они позволяет автоматизировать процессы набора номера телефона или отправки sms. Единственное, что вам нужно сделать, так это вставить следующий код в HTML-страницу.

Источник: articles.sitepoint.com

Имитация псевдо-класса :hover

Так как на iPhone нет мыши, соответственно и CSS псевдо-класс :hover не используется. Хотя, используя некоторые Javascript коды, Вы можете смоделировать :hover на iPhone, когда пользователь будет нажимать на ссылку.

После добавления кода выше, Вы можете добавить CSS стиль:

Источник: www.evotech.net


Оставить комментарий