CSS

Сайт для iPhone



Прогресс это хорошо, и программистам нужно идти в ногу со временем ежедневно изучая новые технологии и особенности отдельных устройств. Такие устройства как 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 и этим эмулятором начал расходиться. В итоге на рабочем устройстве получилось достичь валидного вида, а эмулятор продолжал показывать сайт с багами. Поэтому статья получилась не очень насыщенной, но я надеюсь, что несмотря на это она окажется вам полезной.
Добавлено: 13 Сентября 2013 12:41:26 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...