adsPlace_1

Войти или Зарегистрироваться

adsPlace_3

20 сниппетов для разработки сайтов под iPhone

При разработке веб-сайтов, а также мобильной версии сайтов, Вы должны помнить о различных браузерах, а также о мобильных устройствах, например, таких как iPhone или iPod.

В этой статье мы рассмотрим 20 полезных сниппетов (JavaScript, PHP, CSS, и т.д.) для быстрого и эффективного создания сайтов, дружественных к iPhone.

Обнаружение iPhone и iPod на JavaScript

При разработке сайтов под iPhone и Ipod Touch, первое, что нам нужно сделать, конечно, обнаружить их. Тем самым мы сможем применить конкретный код или стиль для сайта под iPhone.

Следующий сниппет будет определять iPhone и iPod c помощью JavaScript, и перенаправлять пользователей iPhone на конкретную страницу.

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
    }
}

Обнаружение iPhone и iPod на PHP

Хотя предыдущий сниппет и работает великолепно, но JavaScript может быть отключен. В этом случае, вы можете использовать PHP.

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://yoursite.com/iphone');
    exit();
}

Установка ширины окна, как на iPhone

Сколько раз вы загружали сайты в вашем iPhone, и сколько раз они были похожи на свои эскизы?

Причиной тому является то, что разработчики часто забывают определить проекции сайта (или просто не знают). Объявление 'width=device-width' позволяет установить ширину документа такой же, какой является ширина экрана iPhone.

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

Определение проекции очень просто: вставьте следующий meta в header HTML документа.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Включение в iPhone специальной иконки

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

Определение пользовательской иконки для iPhone очень просто: вставьте нижестоящий код в header HTML документа. Изображение иконки должно быть 57px на 57px и в png формате. И не нужно добавлять блеск или круглые углы в иконку, так как iPhone автоматически сделает это за вас.

<link rel="apple-touch-icon" href="images/template/engage.png"/>

Предотвращение Safari от корректировки размера текста при вращении iPhone

Когда вы поворачиваете iPhone, браузер Safari изменяет размер шрифта. Если по каким-то причинам вы не хотите, чтобы этот эффект работал, просто используйте следующий код CSS. '-webkit-text-size-adjust' — это свойство webkit- на CSS, позволяющее контролировать ориентацию текста.

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

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

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

window.onload = function initialLoad() {
    updateOrientation();
}

function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
	contentType += "normal";
	break;

	case -90:
	contentType += "right";
	break;

	case 90:
	contentType += "left";
	break;
	case 180:
	contentType += "flipped";
	break;
    }
    document.getElementById("page_wrapper").setAttribute("class", contentType);
}

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

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

@media screen and (max-device-width: 480px){
    /* All iPhone only CSS goes here */
}

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

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

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

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

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

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

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

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

<a href="tel:12345678900">Позвони мне</a>
<a href="sms:12345678900">Отправь мне sms</a>

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

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

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

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

a:hover, a.hover {
    /* whatever your hover effect is */
}

Какие приемы для верстки под iPhone и iPad знаете Вы?

Последние из рубрики

Комментарии(0)

  • Комментариев еще нет. Будь первым!

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению