463 Продолжим...
Обнаружение ориентации iPhone
В связи с тем, что iPhone позволяет своим пользователям просматривать страницы, как в портретном, так и в пейзажном режиме, вам может понадобится функционал обнаружения ориентации iPhone, чтобы бы правильно отображать страницы вашего сайта. Эта удобная JavaScript функция определяет текущую ориентацию iPhone и применяет определенный класс CSS, чтобы вы могли управлять стилем Вашей страницы. Отметим, что в этом примере, CSS класс добавляется в page_wrapper ID. Просто, замените его на требуемое имя ID (см. строку 23).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
]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); } |
Источник: www.engageinteractive.co.uk
Применение CSS стилей только для iPhones/Ipods
Сниффинг браузера может быть иногда быть полезным, но по ряду причин, это не самая лучшая практика для обнаружения браузера. Если вы ищете чистые способы применения CSS стилей только для iPhone, вы должны использовать следующее. Вставьте этот код в ваш CSS файл.
|
1 2 3 |
@media screen and (max-device-width: 480px){ /* All iPhone only CSS goes here */ } |
Источник: csswizardry.com
Автоматическое изменение размеров изображения для iPhones
На последних сайтах, большинство изображения имеют ширину выше 480 пикселей. Благодаря малым размерам iPhone, есть большая вероятность того, что изображение будет 'выскакивать' из области контента. С помощью следующего CSS кода, вы сможете автоматически изменять на 100% размеры изображения веб-сайта. Так как ширина устройства максимально равна 480px, изображения никогда не будут шире.
|
1 2 3 4 5 6 |
@media screen and (max-device-width: 480px){ img{ max-width:100%; height:auto; } } |
Источник: csswizardry.com
Скрытие по умолчанию панели инструментов
На маленьком экране, например как на iPhone, панель инструментов полезна, но и занимает много места. Если вы хотите скрыть, по умолчанию, панель инструментов Safari, когда iPhone посетитель открыл ваш сайт, просто установите следующий JavaScript код.
|
1 2 3 |
window.addEventListener('load', function() { setTimeout(scrollTo, 0, 0, 1); }, false); |
Источник: articles.sitepoint.com
Использование специальных ссылок
Вы помните «mailto» ссылки? Они были очень популярны несколько лет назад. Этот префикс автоматически открывает клиента электронной почты, установленного на использование по умолчанию. На iPhone введено два аналогичных префикса — tel и sms. Они позволяет автоматизировать процессы набора номера телефона или отправки sms. Единственное, что вам нужно сделать, так это вставить следующий код в HTML-страницу.
|
1 2 |
<a href="tel:12345678900">Позвони мне</a> <a href="sms:12345678900">Отправь мне sms</a> |
Источник: articles.sitepoint.com
Имитация псевдо-класса :hover
Так как на iPhone нет мыши, соответственно и CSS псевдо-класс :hover не используется. Хотя, используя некоторые Javascript коды, Вы можете смоделировать :hover на iPhone, когда пользователь будет нажимать на ссылку.
|
1 2 3 4 5 |
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 стиль:
|
1 2 3 |
a:hover, a.hover { /* whatever your hover effect is */ } |
Источник: www.evotech.net
