Опубликовано автор в категориях Верстальщику.

На сегодняшний день рынок мобильных устройств, которые ориентированны на активное использование Интернет развивается очень динамично. И довольно большую часть рынка с тенденцией к ее увеличению занимает iPhone. Поэтому одно из лидирующих мест среди мобильных браузеров занимает Safari на iPhone. Есть положительные стороны верстки под iPhone: мобильный Safari, как и его старший брат, работает на WebKit (осуществляя богатую поддержку CSS3), верстать нужно только под одно ОС и одну резолюцию экрана. Однако есть моменты, на которые стоит обратить особе внимание, верстая под iPhone.

Верстая под iPhone, вам нужно принять тот факт, что пользователь девайса получит фактически сайт, который существенно отличается от сайта для обозревателя на ПК или нетбуке, но при этом сайт может быть не менее функциональным, поскольку может использовать передовые приемы CSS3 в верстке. Этот пост покажет вам некоторые из основ разработки и проектирования веб-сайтов для iPhone и мобильного Safari.

Для начала

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

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

<?php
  $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    $browser = 'iphone';
  }
?>

Что делает приведенный выше код? Просто определяет использует ли агент пользователя iPhone. Поместите этот кусок кода в самой верхней части страницы, перед любой другой частью разметки. Для того, чтобы использовать какой-то код только для iPhone нужно «обернуть» код в условие предоставленное ниже:

<?php if($browser == 'iphone'){ ?>DO THIS<?php } ?>

Сохранение в HomeScreen укороченного заголовка страницы

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

<?php if($browser == 'iphone'){ ?>
  <title>Короткий заголовок только для iPhone</title>
<?php }else{ ?>
  <title>Обычный заголовк</title>
<?php } ?>

Иконка в хомскрине

Сделать иконку очень просто. Все что нужно — это создать иконку размером 57×57px (как правило это увеличенная версия вашего favicon) в корневую директорию вашего сайта. Иконка должна называться apple-touch-icon.png и iPhone будет использовать ее по умолчанию вместо других.

Отмена пользовательского масштабирования

Второй фрагмента PHP используется для создания метатега под iPhone, который запрещает пользователю пинч-Zoom, который предлагает мобильный Safari:

<?php if($browser == 'iphone'){ ?>
  <meta name="viewport"
  content="width=device-width,
  minimum-scale=1.0, maximum-scale=1.0" />
<?php } ?>

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

Начало стайлинга

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

Первое, что вам нужно сделать, это убедиться, что главная ссылка на стили вашего сайта не имеет media атрибута:

<link rel="stylesheet" type="text/css" href="/path/to/style.css" />

В последствии вы можете распределить медиа атрибуты внутри вашего CSS. Все, что вам нужно сделать, это включить отдельные @media правила.
Общие стили не нужно определять никаким типом. Для печатных стилей используйте объявление @media print , например: @media print { body{ style-info:here; } } и так же для других медиатипов.
Это даст нам возможность положить стили для iPhone непосредственно в конце главного файла стилей:

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

Теперь любой CSS перед объявлением декларации разрешения будет использоваться на всех типах устройств, а все что ниже декларации будут использовать устройства с максимальным размером экрана 480px (например, iPhone).

Что нужно помнить

Есть несколько ключевых моментов, которые используются при разработке CSS для iPhone:

  • Избегайте абсолютной ширины там, где возможно использовать ширину в процентах.
  • Линизируйте все, что это возможно, избегайте плавающих блоков. Не стоит разбивать контент на колонки без крайней необходимости.

Первое, что нужно сделать, это установить специальный стиль для WebKit webkit-text-size-adjust — это свойство будет управлять изменением размеров шрифтов в автоматическом режиме, если можно так выразиться, и вы не придется касаться размеров шрифта самостоятельно. Также, если ваша копия свойств элемента body использует Sans шрифт, например Arial, то вы можете использовать шрифты семейства Helvetica для нормальных сайтов. Однако, Helvetica, не должна использоваться в описании свойств основного элемента body сайта, поскольку она выглядит плох на ПК. Используйте это именно для iPhone:

/*--- Main CSS here ---*/
 
/*------------------------------------*\
	IPHONE
\*------------------------------------*/
@media screen and (max-device-width: 480px){
body{
  -webkit-text-size-adjust:none;
  font-family:Helvetica, Arial, Verdana, sans-serif;
  padding:5px;
}
}

В коде выше также добавлены небольшие отступы, чтобы убедиться, что ничего не коснется края окна браузера. Весь wrapper (оболочка контента) и содержащиеся в нем блоки должны иметь ширину равную 100%.

Структура

Теперь, когда основные параметры настроены мы можем перейти к созданию структуры разметки, взяв за основу наиболее распространенный вариант разметок данного типа — просто две колонки с логотипом и меню в шапке. Если вам нужна другая форма, то думаю на основе этой можно подогнать разметку под себя. Нужно сделать важное действие, о котором мы говорили ранее — удалить все плавающие блоки и установить ширину любого элемента равной 100%. Если вы используете блоки (div) с умом (т.е. для больших контейнеров контента, а не для пунктов навигации, например), то код ниже хорошо подойдет вам для «линеризации» контента:

@media screen and (max-device-width: 480px){
body{...}
div{
  clear:both!important;
  display:block!important;
  width:100%!important;
  float:none!important;
  margin:0!important;
  padding:0!important;
}
}

Это заставит все блоки «отклеится» друг от друга, и принять полную ширину. Вот вы и начали «линеризировать» ваш контент.

Навигация

Если у вас есть навигация, в которой все элементы «отфлоченны» и выведены горизонтально, то стоит сделать следующее:

@media screen and (max-device-width: 480px){
body{...}
div{...}
#nav,#nav li{
  float:none!important;
  clear:both!important;
  margin:0 0 20px 0!important;
  display:block;
  padding:0;
  text-align:left!important;
  width:100%;
}
#nav{
  border:1px solid #ccc;
  padding:5px;
  -webkit-border-radius:5px;
}
#nav li{
  margin:0!important;
}
#nav li a{
  display:block;
}
}

Это то даст вам вертикальное меню навигации, которое имеет 100% ширины, а ссылки имею большую область клика (посредством display:block;), а это означает, что они видны в верхней части каждой страницы и более удобным для пользователей, чем если бы они были небольшими пунктами навигации.

Изображения

Поскольку каждое изображение изначально имеет ширину в пикселях (т.е. собственную ширину) существует высокая вероятность того, что они будут «вырываться» из обертки области (поскольку много изображений будет шире 480px). Для борьбы с этим используем следующее:

@media screen and (max-device-width: 480px){
body{...}
div{...}
#nav,#nav li{...}
img{
  max-width:100%;
  height:auto;
}
}

Это основные элементы, которые присутствуют в любой разметке, есть также много элементов специфичных для каждой страницы, но при их оформлении стоит помнить два правила: относительная масштабируемость и «линеризация». Да, и помните, что верстая под iPhone вам можно не стеснятся использовать популярные свойства CSS3.

P.S. Как всегда о разном…

Казалось бы, что может быть общего между словами матрасы и свинина? А таки если покопаться в голове то можно найти общее. В мафиозных кланах США средины двадцатого века существовало такой понятие как, залечь на матрасы, что означало перейти на осадное положение сгруппировав основные силы в периметре ведения боевых действий, но в недоступности для врага. Так вот при этом делались масштабные закупки продовольствия, в которых свинина занимала очень значимую часть, как непосредственный источник белка для восстановления миозиновых волокон (собственно мышц) при нагрузка в столкновениях с врагом и заживлении ран.натуральное мыло

11 комментариев к записи “Верстаем под iPhone”

  1. Максим Покровский

    Я вам подкину еще ключевых слов, а то их явно не хватает: ну что это такое — всего лишь полсотни вариаций на тему «верстаем под iphone». Верстать под Iphone, айфон верстка, блог webmasters верстать iphone, iphone и верстка, а ты сверстал под iphone?

    Ответить
    • hiway

      Не понимаю к чему сарказм? Да верстал, да верстаю, да охуительно волоку в верстке! Еще вопросы есть?

      Ответить
  2. Сергей

    Спасибо воспользовался статьёй.
    Вот что вышло:
    оригинал сайта vkget .ru
    вот сделаный под айфон i.vkget .ru

    если зайдёте с айфона то редиректнет на айфон версию если с обычного браузера на айфон версию редиректнет на обычную версию!

    Ответить

Trackbacks/Pingbacks

  1.  Верстка сайта под iPhone | MzLucas />

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

  • (не будет показан)