Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Верстка под iPhone || php сохранение картинки >>>

Сайт для iPhone

22.01.2012
Сайт для iPhone

Здравствуй уважаемый читатель блога LifeExample, эта статья поведает тебе о том как создать сайт для iPhone. Прогресс в технике диктует и устанавливает жесткие правила для web-программистов, не разрешая им ни на минуту расслабляться. С каждым годом появляются новые устройства, с разными разрешениями экрана, разными браузерами, и с разным методом просмотра сайтов.

Прогресс это хорошо, и программистам нужно идти в ногу со временем ежедневно изучая новые технологии и особенности отдельных устройств. Такие устройства как Net-book, iPhone, iPad и д.р. отрывают пользователей от домашних компьютеров все с большей степенью, а это означает, что сайты созданные для просмотра на компьютере, теперь будут открываться и с мобильных устройств.

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

Приступим к процессу верстки сайта для iPhone. Главное, что должен иметь разработчик сайта, это возможность свободного тестирования своего детища. Сложно создавать сайт для iPhone не имея такого устройства под рукой, но все-таки выход есть…

Выбор эмулятора для браузера iPhone (Шаг 1)

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

Если вы еще не открыли приведенный выше сервис, то переходим по этойссылке и смотрим, как выглядит наш сайт.

Тестер сайта для iPhone

Я попробовал протестировать свой блог и получил, достаточно неожиданный для себя вариант, т.к. ожидал худшего. Верстка практически не расползлась, за исключением подвала сайта, чего нельзя сказать о сайте заказчика, который содержал очень много элементов с правилом:

position: fixed;

Подготовка PHP кода к тестированию iPhone версии сайта (Шаг 2)

Внесем в код формирования страницы разграничение на подключения css стилей, для устройства iPhone и для простых компьютеров. Эту задачу можно решить, добавив в тег <head> строку, которая подключает css файл для устройств с шириной экрана не более 480 px:

1
<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

В этом случае mobile.css будет использоваться не только iPhone, но и всеми другими мобильными устройствами.

Для того чтобы mobile.css использовался только для iPhone нужно использовать такую проверку:

1
2
3
4
5
6
7
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true){
    $browser = 'iphone';
  }
   if($browser == 'iphone')
echo '<link rel="stylesheet" href="/mobile.css" media="only screen and (max-device width:480px)"/>';
   else    echo '<link rel="stylesheet" type="text/css" media="all"   href="/style.css" />';

Для работы этого кода вы должны иметь два css файла, один для обычных сайтов (style.css) , другой только для iPhone (mobile.css).

Внимание! Если у вас нет под рукой устройства iPhone, с помощью которого вы будете тестировать изменения, и вы используете вышеупомянутый эмулятор, то на время тестирований, придется немного изменить код и использовать его в таком виде:

1
2
3
4
5
6
7
$testemulator=trim("Mozilla/5.0 (Windows; U; Windows NT 6.1; ru-RU) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1");
  if ($testemulator == trim($_SERVER['HTTP_USER_AGENT'])){
    $browser = 'iphone';
  }
   if($browser == 'iphone')
 echo '<link rel="stylesheet" href="/mobile.css" media="only screen and (max-device width:480px)"/>';
   else    echo '<link rel="stylesheet" type="text/css" media="all"   href="/style.css" />';

Смысл таких изменений в том, что при обращении эмулятора к сайту, в переменной $_SERVER[‘HTTP_USER_AGENT’], не содержит искомых упоминаний о платформе iPhone, т.к. фактически платформой является именно тот браузер, в котором запущен данный эмулятор. Я использовал Safari-533.21.1 , поэтому в моем случае $_SERVER[‘HTTP_USER_AGENT’] содержал такую информацию:

1
 "Mozilla/5.0 (Windows; U; Windows NT 6.1; ru-RU) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1";

Вам нужно подставить в первую строку кода содержимое вашего $_SERVER[‘HTTP_USER_AGENT’]. Еще раз обращу внимание на то, что это только на период тестирования, впоследствии нужно будет вернуть проверку для iPhone, как это сделано в первом варианте кода.

Теперь мы можем смело составлять css правила, и анализировать изменения без подручного iPhone.

Заполняем mobile.css (3й шаг)

Для начала обнулим все правила присвоенные элементам по умолчанию:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Делать это не обязательно, но я считаю полезно во избежание неожиданностей сбрасывать дефолтовые правила.

Далее вспоминаем о том, что в сайтах для iPhone, блоки должны растягиваться на 100% ширину, и ни к чему не прилипать. Хотя эта особенность важна скорее для веб приложений, а в сайтах можно использовать свойство float, но тут как говорится на вкус и цвет…

Вставляем в mobile.css код, который оптимизирует все div блоки для iPhone :

1
2
3
4
5
6
7
8
div{
  clear:both!important;
  display:block!important;
  width:100%!important;
  float:none!important;
  margin:0!important;
  padding:0!important;
}

Теперь можно приступать к верстке, и заполнять mobile.css необходимыми правилами. Причем можно смело забить на существование Interner Explorer и использовать все новшества CSS3 и HTML5. Например, закруглить углы, или наложить тень на текст блока:

1
2
3
4
.block{
-webkit-border-radius: 50px 0 0 50px; // закругляет углы
text-shadow: 2px 2px #ff0000; // накладывает тень на текст
}

Важно помнить, что ни один из блоков не должен иметь свойство

Position: fixed;

Т.к в этом случае при масштабировании блоки будут наезжать друг на друга. В некоторых случаях будет полезным задать максимальные и минимальные значения ширины для обрамляющих блоков:

1
2
3
4
5
6
body{
        width:1024px;
    height:768px;
    min-width:1024px;
    min-height:768px;
}

Помните и о том, что фоновые изображения для iPhone не должны быть слишком большими. Не рекомендую использовать изображения более 3 Мегапикселей (2048×1536) т.е. количество пикселей в картинке не должно быть больше 3*1024*1024 = 3 145 728 px. Чтобы было понятно картинка с разрешением 1024×768 содержит 786 432 px.

Подробнее об ограничениях для iPhone можете прочитать в статье Верстка под iPhone.

Если все-таки необходимо использовать большое изображение, то советую вам разбить его на части по 3 мегапиксела и с помощью multiple background склеить их вместе:

1
2
3
4
5
6
.bigimage {

background: url(images/img_part2.jpg) 50% 1000px no-repeat,
url(images/img_part1.jpg) 50% 0px no-repeat ;

}

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

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Нравится

Комментарии

  • aprilfox

    Спасибо большое за статьи (в том числе и за «Верстка под iPhone»)! 🙂
    Для начинающего (то есть для меня )) ) очень даже полезно 🙂
    Пи.Эс. Хороший у вас ресурс, с удовольствием бы его «лайкнула», если бы были соответствующие кнопки без функции «поделиться» — стараюсь не забивать новости всем, что мне где-то в нете понравилось 🙂

  • динис

    Добрый день! Вопрос такой,у меня айфон 3s, почему вконтакте музыку не производит, либо производит но долго очень грузит????спасибо!

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

  • alex-boa

    Спасибо господи, что есть на свете такие люди!
    Что бы мы без вас делали!!!
    Наверное, мели улицы и рыли котлованы…)))

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

    Подписаться на комментарии к этой статье по RSS

    Размещение статей и контекстных ссылок
    Яндекс.Метрика