Верстка под iphone

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

Поэтому мы сегодня разберем как сделать так, чтобы в любом браузере настольного компьютера сайт мы видели в таком виде (Обычные хэдэр, сайдбар, футер, контент. Так строится любая тема на WP):

А на любом устройстве под iOS 4.0, т.е. iPhone или iPod вот так:

При этом мы только поменяем CSS файл стилей и добавим один meta-тэг. Это просто сделать, Вы и сами сейчас в этом убедитесь.

И так, исходный код HTML страницы.

<html>
<head>
<title>Стиль iPhone</title>
<?php
// Немного PHP, определим что агент содержит слово iPhone и все
if (strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")){
?>
<!-- Важный метатэг для портативных устройств на Safari, убирает пинч-зум, который используется при открытии любого сайта не под iPhone -->
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="iphone.css" type="text/css" media="all" />
<?php
} else {
?>
<link rel="stylesheet" href="normal.css" type="text/css" media="all" />
<?php } ?>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="http://makecode.ru/2010/08/layout-for-iphone/">Главная страница</a></h1>
<div id="utility">
<ul>
<li><a href="#">О проекте</a></li>
<li><a href="#">Блог</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="#">Первая страница</a></li>
<li><a href="#">Вторая страница</a></li>
<li><a href="#">Третья страница</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>О примере</h2>
<p>
Мы узнали как сделать хорошую верстку под iPhone.
</p>
</div>
<div id="sidebar">
<p>Боковая колонка, обратите внимание как она отображается в iPhone.</p>
</div>
<div id="footer">
<ul>
<li><a href="#">Первая страница</a></li>
<li><a href="#">Вторая страница</a></li>
<li><a href="#">Третья страница</a></li>
</ul>
<p>MakeCode.ru.</p>
</div>
</div>
</body>
</html>

Очень удобно то, что страница всегда одна и та же - меняется только стиль. Я думаю с normal.css все понятно, это обычный стиль. Но что же такого хитрого спрятано в iphone.css? Абсолютно ничего, вот его листинг.

body {
      background-color: #ddd;
      color: #222;
      font-family: Helvetica;
      font-size: 14px;
      margin: 0;
      padding: 0;
}

#header h1 {
      margin: 0;
      padding: 0;
}

#header h1 a {
      background-color: #ccc;
      border-bottom: 1px solid #666;
      color: #222;
      display: block;
      font-size: 20px;
      font-weight: bold;
      padding: 10px 0;
      text-align: center;
      text-decoration: none;
}

#header ul {
      list-style: none;
      margin: 10px;
      padding: 0;
}

#header ul li a {
      background-color: #FFFFFF;
      border: 1px solid #999999;
      color: #222222;
      display: block;
      font-size: 17px;
      font-weight: bold;
      margin-bottom: -1px;
      padding: 12px 10px;
      text-decoration: none;
}

#header h1 a {
      text-shadow: 0px 1px 0px #fff;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
}

#header ul li:first-child a {
      -webkit-border-top-left-radius: 8px;
      -webkit-border-top-right-radius: 8px;
}

#header ul li:last-child a {
      -webkit-border-bottom-left-radius: 8px;
      -webkit-border-bottom-right-radius: 8px;
}

#header ul.hide {
      display: none;
}

#content, #sidebar {
      padding: 10px;
}

#footer {
      display: none;
}

Мы используем свойства доступные браузерам на движке webkit, на котором как раз и работает браузер Safari. Очень полезное свойство -webkit-gradient позволяет создать градиент для заголовка. А -webkit-border-radius создает закругленные углы. Все вместе помогает создать интерфейс-копию интерфейса iPhone.

Стоит отметить, что некоторые свойства из CSS 3.0 (а градиент и закругленные углы это как раз и есть новшества CSS 3.0) доступны и в Opera и Firefox, только синтаксис немного другой. (Для закругленных углов это -moz-border-radius и border-radius). Но так как основной браузер на iPhone и iPod Safari то мы указываем эти свойства только для него.

Скачать файл iphone.css.
Скачать файл normal.css.

Посмотреть живой пример.

Понравился пост? Подпишитесь на RSS ленту или Twitter.
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (8 votes, average: 4,25 из 5)
Loading ... Loading ...
о 5 Август, 2010
8 Комментариев
Рубрика CSS, PHP, Верстка, Статьи
Теги: , , , ,

Похожие записи

8 Комментариев на «Верстка под iphone»

  • комок
    5 Август, 2010, 16:59

    Hidden due to low comment rating. Click here to see.

    Poorly-rated. Like or Dislike: Thumb up 0 Thumb down 5

    Ответить

  • makecode
    5 Август, 2010, 17:00

    Да пожалуйста) Наздоровье!

    Thumb up 2 Thumb down 1

    Ответить

    jazzlevit Ответил:
    Сентябрь 29th, 2011 at 16:43

    Спасибо большое обязательно попробую, очень интересно.

    Thumb up 0 Thumb down 0

    Ответить

  • Юлия
    15 Декабрь, 2011, 10:53

    Hidden due to low comment rating. Click here to see.

    Poorly-rated. Like or Dislike: Thumb up 0 Thumb down 3

    Ответить

    makecode Ответил:
    Декабрь 15th, 2011 at 17:28

    Кодировка слетела, поправил.

    Thumb up 1 Thumb down 0

    Ответить

  • Роман
    12 Февраль, 2012, 19:47

    Можно узнать, а зачем в коде два раза написан закрывающий тег ?

    Thumb up 0 Thumb down 0

    Ответить

  • Роман
    12 Февраль, 2012, 19:49

    да блин! тег hеаd два раза стоит в конце, который закрывающий

    Thumb up 0 Thumb down 0

    Ответить

    makecode Ответил:
    Февраль 12th, 2012 at 20:42

    Спасибо за внимательность. Исправил.

    Thumb up 0 Thumb down 0

    Ответить

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

«
»