534 При разработке веб-сайтов, вы должны помнить о различных браузерах, а также о мобильных устройствах, наприер, таких как iPhone или iPod.
В этой статье мы рассмотрим 10 самых полезных сниппетов (JavaScript, PHP, CSS, и т.д.) для быстрого и эффективного создания сайтов, дружественных к iPhone.
Обнаружение iPhone и iPod на JavaScript
При разработке сайтов под iPhone и Ipod Touch, первое, что нам нужно сделать, конечно, обнаружить их. Тем самым мы сможем применить конкретный код или стиль для сайта под iPhone.
Следующий сниппет будет детектить(detect) iPhone и iPod c помощью JavaScript, и перенаправлять пользователей iPhone на конкретную страницу.
|
1 2 3 4 5 |
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"; } } |
Источник: http://davidwalsh.name/detect-iphone
Обнаружение iPhone и iPod на PHP
Хотя предыдущий сниппет и работает великолепно, но JavaScript может быть отключен. В этом случае, вы можете использовать PHP.
|
1 2 3 4 |
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) { header('Location: '); exit(); } |
Источник: davidwalsh.name
Установка ширины окна, как на iPhone
Сколько раз вы загружали сайты в вашем iPhone, и сколько раз они были похожи на свои эскизы?
Причиной тому является то, что разработчики часто забывают определить проекции сайта (или просто не знают). Объявление 'width=device-width' позволяет установить ширину документа такой же, какой является ширина экрана iPhone.
Существует еще два объявления-параметра, помогающих более гибко управлять размерами сайта на iPhone. В противном случае, вы можете удалить эти объявления.
Определение проекции очень просто: вставьте следующий meta в header HTML документа.
|
1 |
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> |
Источник: www.engageinteractive.co.uk
Включение в iPhone специальной иконки
Когда пользователь добавляет Вашу страницу в закладки или делает домашней, iPhone автоматически формирует скриншот вашего сайта в виде иконки. Но вы можете указать для iPhone свою собственную иконку, которая, безусловно, будет лучше.
Определение пользовательской иконки для iPhone очень просто: вставьте нижестоящий код в header HTML документа. Изображение иконки должно быть 57px на 57px и в png формате. И не нужно добавлять блеск или круглые углы в иконку, так как iPhone автоматически сделает это за вас.
|
1 |
<link rel="apple-touch-icon" href="images/template/engage.png"/> |
Источник: www.engageinteractive.co.uk
Предотвращение Safari от корректировки размера текста при вращении iPhone
Когда вы поворачиваете iPhone, браузер Safari изменяет размер шрифта. Если по каким-то причинам вы не хотите, чтобы этот эффект работал, просто используйте следующий код CSS. '-webkit-text-size-adjust' — это свойство webkit- на CSS, позволяющее контролировать ориентацию текста.
|
1 2 3 |
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:none; } |
Источник: www.engageinteractive.co.uk
