Прогресс это хорошо, и программистам нужно идти в ногу со временем ежедневно изучая новые технологии и особенности отдельных устройств. Такие устройства как
Net-book, iPhone, iPad и д.р. отрывают пользователей от домашних компьютеров все с большей степенью, а это означает, что сайты созданные для просмотра на компьютере, теперь будут открываться и с мобильных устройств.
Верстка сайта для
iPhone или
iPad не сильно отличается от обычного процесса, не скажу что она сложнее или легче, но верстальщик должен знать некоторые характерные особенности.
Приступим к процессу верстки сайта для iPhone. Главное, что должен иметь разработчик сайта, это возможность свободного тестирования своего детища. Сложно создавать сайт для iPhone не имея такого устройства под рукой, но все-таки выход есть…
Выбор эмулятора для браузера iPhone (Шаг 1)
Поискав в интернете разные симуляторы и эмуляторы для мобильных устройств, наткнулся на единственный функционирующий сервис , который смог показать сайт в том же виде, что и настоящий
iPhone лежащий под рукой. Тем не менее, у данного сервиса есть значительные недостатки, такие как отсутствие возможности масштабирования сайта, а также не полное соответствие браузеру
Safari установленному на мобильном устройстве
iPhone.
Если вы еще не открыли приведенный выше сервис, то переходим по этойссылке и смотрим, как выглядит наш сайт.
Я попробовал протестировать свой блог и получил, достаточно неожиданный для себя вариант, т.к. ожидал худшего. Верстка практически не расползлась, за исключением подвала сайта, чего нельзя сказать о сайте заказчика, который содержал очень много элементов с правилом:
position: fixed;
Подготовка PHP кода к тестированию iPhone версии сайта (Шаг 2)
Внесем в код формирования страницы разграничение на подключения
css стилей, для устройства
iPhone и для простых компьютеров. Эту задачу можно решить, добавив в тег <head> строку, которая подключает
css файл для устройств с шириной экрана не более
480 px:
<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>
В этом случае
mobile.css будет использоваться не только
iPhone, но и всеми другими мобильными устройствами.
Для того чтобы
mobile.css использовался
только для iPhone нужно использовать такую проверку:
$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, с помощью которого вы будете тестировать изменения, и вы используете вышеупомянутый эмулятор, то на время тестирований, придется немного изменить код и использовать его в таком виде:
$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'] содержал такую информацию:
"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й шаг)
Для начала обнулим все правила присвоенные элементам по умолчанию:
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 :
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. Например, закруглить углы, или наложить тень на текст блока:
.block{
-webkit-border-radius: 50px 0 0 50px; // закругляет углы
text-shadow: 2px 2px #ff0000; // накладывает тень на текст
}
Важно помнить, что ни один из блоков не должен иметь свойство
Position: fixed;
Т.к в этом случае при масштабировании блоки будут наезжать друг на друга. В некоторых случаях будет полезным задать максимальные и минимальные значения ширины для обрамляющих блоков:
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.
Если все-таки необходимо использовать большое изображение, то советую вам разбить его на части по 3 мегапиксела и с помощью
multiple background склеить их вместе:
.bigimage {
background: url(images/img_part2.jpg) 50% 1000px no-repeat,
url(images/img_part1.jpg) 50% 0px no-repeat ;
}
Когда я начал писать статью Сайт
для iPhone, я хотел пройтись по всем пунктам создания верстки, от начала до конца, и демонстрировать с помощью эмулятора все изменения, но эта идея потерпела фиаско т.к. в определенный момент внешний вид сайта
на настоящем iPhone и этим эмулятором начал расходиться. В итоге на рабочем устройстве получилось достичь валидного вида, а эмулятор продолжал показывать сайт с багами. Поэтому статья получилась не очень насыщенной, но я надеюсь, что несмотря на это она окажется вам полезной.