---
title: Особенности мобильной версии сайта
date: 2010-09-18T10:00
tags: [backend]
---
Сделал себе мобильную версию блога, просто [потому что надо](http://www.useit.com/alertbox/mobile-usability.html) — даже на андроиде с умным форматированием текста (который [изобрела Опера](http://www.opera.com/mobile/demo/)) читать сайт не оптимизированный под мобильники неудобно. Для разработчиков это значит два варианта — либо сделать css файл который будет переделывать некоторые вещи и прятать ненужные блоки, либо же использовать отдельные шаблоны и в лучшем случае использовать параметр в том же контроллере что и основное приложение.
Устройство определяется через параметр user-agent в заголовке запроса - это можно использовать дальше в бизнес логике, например через [php функцию](http://detectmobilebrowsers.mobi/). Знание устройства _может_ влиять на то какую функциональность стоит **подгружать**, но это вовсе не обязательно потому что ..
---
### Игра в прятки со стилями
Мобильная версия в _лучшем случае_ заключается лишь в одном css-файле, таком же как и версия для печати где вначале прячутся ненужные блоки, реклама которая слишком мелкая что-бы её даже заметили, всякие виджеты "самого популярного", статистика... Код подгрузки стилей в шапке выглядит следовательно так..
``
.. и просматриваются в Firefox благодаря [Webdeveloper](https://addons.mozilla.org/ru/firefox/addon/60/)-плагину:
Однако если в печати элементы **форм** прячутся, то в мобильной версии практически всё, и кнопки в особенности увеличивается. В этот момент вы вероятно задумываетесь над порядком HTML схемы — можно ли просто так спрятать пару блоков и при этом ничего не сломать. В простом блоге как у меня в общем то да, потому что общая структура осталось той же - шапка с поиском, меню и поток статей, а вот в более сложных сайтах хочется какую-то табуляцию _взамен_ меню.
Теперь что-бы браузер в смартфоне не начинал сразу показывать страницу с птичьего полёта вставим немножко кода
` `
Первая строчка говорит фактически что ширина такая как задана у устройства, а zoom-out делать нельзя. Впрочем Андроидный webkit ограничения проигнорировал и бегунки по прежнему видны. А всё из-за фиксированных в пикселях размерах. Злоо.. Переопределям все блоки в ширину 100%, а все размеры шрифтов в em единицах. Таблицы, картинки и флеш-объекты всё ещё лезут за экран? Overflow:hidden на них. На картинки можно даже повесить уменьшение браузером с соблюдением пропорций
`-webkit-transform: scale(0.5);-moz-transform:scale(0.5);`
Но чудится мне что более качественные решения требуют более сложных решений с ресайзом.. я пока что повесил 100% ширину. С объектами (youtube) полегче - тоже вешается 100% ширина и минимальная высота в 200px.
### Всякие важные мелочи
Но самое главное естественно повесить самое нужное. В моём случае это личные контакты — телефон и email. Телефон можно сделать ссылкой которую поддерживают Android и iOS
`Телефон спасения`
В случае магазинов это наверняка будут времена работы и местоположение на карте (которые тоже нужно [ссылками делать](http://developer.apple.com/library/ios/#featuredarticles/iPhoneURLScheme_Reference/Articles/MapLinks.html#//apple_ref/doc/uid/TP40007894-SW1)).
- В iOS у полей ввода `` на html5-сайтах надо указывать параметр type (email, url, tel) что-бы виртуальная клавиатура менялась на соответсвующий вид
- [Mobile Best Practices](http://www.w3.org/TR/mobile-bp/) рекомендует короткие ссылки, как например поддомен "m" m.flickr.com и [m.facebook.com](http://m.facebook.com/)
- Единые стили есть разве что для iPhone в виде [плагина jQTouch](http://jqtouch.com/)
Создание полноценной мобильной версии (а не просто css слоя) - сложная задача поскольку может ориентирована и на разные устройства (ipad, iphone, android, tv, старые мобильники) и соответсвенно может нуждаться в изменении кода (если скажем ajax не поддерживается). У Gmail к примеру 4 версии для мобильников.
См по теме
- [W3C mobile checker](http://validator.w3.org/mobile/)
## Related
- [Alter sequence](/ru/blog/tech/backend/DB/postgres/alter-sequence/)
- [Amazon S3 direct upload](/ru/blog/tech/backend/amazon-s3-direct-upload/)
- [CUDA](/ru/blog/tech/backend/gpu/cuda/)