engВерстка под iPad: заметки новичка
В одном из проектов у меня было ТЗ: адаптивная верстка под iPad. Естественно, ни с чего начать, ни как к этому вопросу подойти, я не знала.
Первым делом был опрошен Яндекс, но поиск не дал результатов (Яндекс - такой Яндекс, выложил мне кучу предложений по верстке, но о том. как эт оделать самостоятельно - ни слова). Помог мне Гугл. он почти сразу выдал много полезной информации, но о том, чтобы в одной статье была собрана вся необходимая информация сразу, такого я, видимо, не нашла (может, конечно, плохо искала). Так что собирать сведения пришлось по кусочкам, тут и там. Поэтому и родилась идея написать такую статью, где были бы описаны все трудности, с которыми я столкнулась в процессе работы. Это даже не советы начинающим, а скорее узелки себе на паямть, елси вдруг еще столкнусь с такой задачей в будущем.
Первые шаги
Первым делом прописываем в <head> следующие мета-тэги (для корректного отображения на айпаде, реально нужно):
<meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Мне также пришлось задавать ширину контента через стили в <head>, иначе не работало :(
<? if(!strpos($_SERVER['HTTP_USER_AGENT'],'iPad')) { ?>
<style> .content{width: 1064px;} </style>
<? } ?>
В файле стилей (в самом конце), пишем стили под айпад:
@media screen and (max-width: 1024px) {} //для альбомной ориентации (landscape)
@media screen and (max-width: 768px) {} //для книжной ориентации (portrait)С портретными стилями надо быть аккуратнее, т.к., например, айфон распознает девайс именно как max-width: 768px, и следовательно даже в горизонтальном положении показывает урезанную версию сайта. Мне пришлось убрать эти стили, т.к. было плохо.
На чем тестировать?
На айпаде :) Однозначно надо проверять на нем (удобно ли нажимаются ссылки пальцем и все ли элементы хорошо видны)
Но что делать, если его нет под рукой (и у знакомых не одолжить)?
Я пошерстила инет на предмет эмуляторов айпадов, вот самые распространенные решения.
Есть много разновидностей онлайн-эмуляторов сафари на айпаде, например, http://ipad-emulator.org/, но это создает определенные трудности, потому что не получится тестить на локалхосте, надо каждый раз грузить файл стилей на хостинг.
Лично я попробовала работать с бесплатной версией программы Electric Mobile Simulator (от Electric Plum). Удобно, красиво, работает с локалхостом. Но... результат на айпаде оказался не таким, увы.
В результате я остановилась на варианте работы в Safari под Windows в среде разработчика. Очень-очень удобно, и есть отладчик кода (не firebug, конечно, но тоже мощный). Вот в этой статье "Веб-инспектор Safari" подробно описано как этот режим разработки включить и тестить. от себя добавлю только, чтобы увидеть реальный результат на большом монике, надо "сжать" окно браузера до нужного размера - и, ура! все красиво видно. А главное, что на реальном айпаде все так и отображается.
Еще практические советы:
Ширина окна у ауйпада 1024х768 пикселей, но опытным путем выявлено, что надо делать 1019 пикселей (ширина полосы прокрутки). Если тестить на обычном компе, с обычным сафари, то увы, у него и прокрутка обычная, 17 пикселей. Это надо помнить, и делать под 5 пикселей запас, тогда все будет красиво.
Для Apple-устройств есть полезная фича - иконка, которая отображается при добавлении сайта в закладки. По умолчанию делается скрин сайта, а это далеко не всегда красиво. Так что лучше подготовить иконку самому (или с помощью спец. программ), размерами 256х256, 128х128 или 62х62 пикселей (я делала 256) с названием apple-touch-icon.png, положить ее в корень сайта и прописать в <head>:
<link rel="apple-touch-icon-precomposed" href="/apple-touch-favicon.png" />
Не забываем про скругленные углы (их делать не надо, сафари сам их "отпилит", просто надо помнить о них и не ставить туда текст или что-т оважное).
Автор: Дарья Рыбалтович
4Случайная картинка:
