Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%
Сайт для iPhone
Здравствуй уважаемый читатель блога LifeExample, эта статья поведает тебе о том как создать сайт для iPhone. Прогресс в технике диктует и устанавливает жесткие правила для web-программистов, не разрешая им ни на минуту расслабляться. С каждым годом появляются новые устройства, с разными разрешениями экрана, разными браузерами, и с разным методом просмотра сайтов.
Прогресс это хорошо, и программистам нужно идти в ногу со временем ежедневно изучая новые технологии и особенности отдельных устройств. Такие устройства как Net-book, iPhone, iPad и д.р. отрывают пользователей от домашних компьютеров все с большей степенью, а это означает, что сайты созданные для просмотра на компьютере, теперь будут открываться и с мобильных устройств.
Верстка сайта для iPhone или iPad не сильно отличается от обычного процесса, не скажу что она сложнее или легче, но верстальщик должен знать некоторые характерные особенности. Подробно с особенностями сайтов для iPhone можно ознакомиться в статье «Верстка под iPhone».
Приступим к процессу верстки сайта для iPhone. Главное, что должен иметь разработчик сайта, это возможность свободного тестирования своего детища. Сложно создавать сайт для iPhone не имея такого устройства под рукой, но все-таки выход есть…
Выбор эмулятора для браузера iPhone (Шаг 1)
Поискав в интернете разные симуляторы и эмуляторы для мобильных устройств, наткнулся на единственный функционирующий
Если вы еще не открыли приведенный выше сервис, то переходим по
Я попробовал протестировать свой блог и получил, достаточно неожиданный для себя вариант, т.к. ожидал худшего. Верстка практически не расползлась, за исключением подвала сайта, чего нельзя сказать о сайте заказчика, который содержал очень много элементов с правилом:
Подготовка 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; // накладывает тень на текст } |
Важно помнить, что ни один из блоков не должен иметь свойство
Т.к в этом случае при масштабировании блоки будут наезжать друг на друга. В некоторых случаях будет полезным задать максимальные и минимальные значения ширины для обрамляющих блоков:
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 ленту блога.
Комментарии
Спасибо большое за статьи (в том числе и за «Верстка под iPhone»)! 🙂
Для начинающего (то есть для меня )) ) очень даже полезно 🙂
Пи.Эс. Хороший у вас ресурс, с удовольствием бы его «лайкнула», если бы были соответствующие кнопки без функции «поделиться» — стараюсь не забивать новости всем, что мне где-то в нете понравилось 🙂
Добрый день! Вопрос такой,у меня айфон 3s, почему вконтакте музыку не производит, либо производит но долго очень грузит????спасибо!
Вопрос не по теме блога. Вам следует найти более специализированный ресурс, по теме использования устройства iPhone.
Все же по части вашей проблемы, мне кажется что дело в качестве интернет соединения.
Спасибо господи, что есть на свете такие люди!
Что бы мы без вас делали!!!
Наверное, мели улицы и рыли котлованы…)))