CSS, HTML
Некоторые полезные возможности CSS и HTML.

Верстка под iPhone несколько отличается от верстки под другие мобильные устройства или для браузера компьютера. У iPhone маленький экран, шириной обычно 480 px, поэтому в шаблоне стоит добавить специальный файл каскадной таблицы стилей css и указать ширину устойства max-device-width: 480px.

<!--[if !IE]>-->
<link rel="stylesheet" href="/small-screen.css" media="only screen and (max-device-width: 480px)" />
<!--<![endif]-->


Если будет использоваться общая таблица стилей, то можно добавить стили, специфичные для iPhone в основную таблицу с помощью блока @media, например:

@media only screen and (max-device-width: 480px) {
#test-block {
background: red;
}
}

По умолчанию, Safari на iPhone отобразит страницу так же как браузер на большом компьютерном экране шириной 980 px. Затем он отмасштабирует содержимое так, чтобы оно умещалось на маленьком экране. В результате, пользователь видит крохотные, неразборчивые буквы и должен увеличивать масштаб, чтобы разглядеть интересующие его места. Это делает чтение страницы очень неудобным. Чтобы это обойти, надо указать в мета-теге ширину страницы:

<meta name="viewport" content="width=480px" />

У метатега могут быть и другие параметры:

<meta name="viewport" content="width=480px,initial-scale=1,user-scalable=no" />

initial-scale — коэффициент масштабирования, в котором пользователь изначально видит вашу страницу,
user-scalable — указание того, является ли функция масштабирования доступной пользователю (no - запрет масштабирования).

Для изменения ориентации экрана нужно обратиться к JavaScript свойству window.orientation, которое имеет следующие значения:
0 — нормальная портретная ориентация (кнопка home находится внизу)
-90 — альбомная при повороте по часовой стрелке (кнопка home слева)
90 — альбомная при повороте против часовой стрелки (кнопка home справа)
180 — пока не поддерживается, в будущем — перевёрнутая портретная ориентация с кнопкой home вверху

Используя JavaScript, надо изменять класс элемента body при изменении текущей ориентации. В разметке добавить элементу body имя класса (portrait или landscape) и в таблице стилей определить различные стили для body.portrait, body.landscape.

window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);

function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}

Есть также вариант импорта нужного css файла в зависимости от ориентации экрана:
@import url("portrait.css") all and (orientation:portrait);
@import url("landscape.css") all and (orientation:landscape);

или вот таким образом:

@media screen and (orientation:portrait) {
body { opacity: 1; }
}
@media screen and (orientation:landscape) {
body { opacity: 0; }
}

Скрытие тулбаров при загрузке страницы


Снова используется JavaScript для того, чтобы убрать строку ввода URL после прокрутки страницы:

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

А если страница слишком короткая и прокрутка для неё недоступна, то дополнительный тег meta. Чтобы сделать страницу прокручиваемой, надо установить размеры области просмотра:

<meta name="viewport" content="height=480px,width=640px" />

Специальные ссылки

Чтобы при клике на телефонный номер по нему можно было позвонить, надо в параметре href ссылки указать: tel:номер-телефона

А для отправки смс, слово tel заменяется на sms:номер-телефона

Ссылки на youtube, google maps и некоторые другие сайты автоматически запускают соответствующие приложения на iPhone.

Также при верстке надо помнить следующие правила:

  1. Изображения не должны быть слишком большими
  2. Adobe Flash не поддерживается
  3. Кэшируются файлы размером не более 25 Kb.
  4. Не поддерживается работа с файлами с помощью input type=”file”
  5. Могут возникнуть проблемы с использованием внешних шрифтов.
  6. Не работает mouseOver так как нету курсора.
  7. Работают AJAX, новшества CSS3 и HTML5.
  8. Можно использовать больше шрифтов, рекомендуется шрифт Helvetica.
  9. Можно задавать цвета с альфа-каналом для прозрачности color :rgba(0,0,0,.50); закругленные углы, градиент.
  10. Макет сайта должен состоять из одной колонки, а элементы должны растягиваться на 100% ширины

Протестировать верстку можно на следующих сайтах:
Тестер верстки под iPhone: www.iphonetester.com
Тестер верстки под iPad: ipadpeek.com
Тестер верстки под Opera Mini: www.opera.com/developer/tools/mini

Рекомендуется протестировать сайт также в Opera Mini, так как могут быть существенные различия.

Также для верстки есть специальные приложения: jQtouch, IUI, UiUIKit, Sencha Touch, jQuery Mobile.

Источники: interpretor.ru

Реклама на сайте

Реставрация ковки
Художественная ковка в Подмосковье по разумным ценам. Выезд на место
куй-с-нами.рф
Нанять адвоката
Мы поможем! Качественная защита! Грамотные адвокаты в Санкт-Петербурге
mesheryakov.com