Верстка для мобильных устройств

Среди пользователей сайтов для мобильных, немало тех , кто заходит с древних устройств: с маленькими экранами, частичной поддержкой CSS2 и прочими мелкими неприятностями. Кому то  может показаться, что таких мобил, не так уж и много осталось. Однако это не так. Для примера  статистика Waplog по разрешениям мобильных устройств. Из общей статистики я вычел посетителей зашедших с компа и пересчитал данные. Получился вот такой симпатичный график. На нем красным и желтым отображена «группа риска», это телефоны с разрешением меньше 176(7.5%) и 176-240px(5.9%).  Маленькое разрешение позволяет предположить, что аппараты древние. Верстка для мобилСиним отмечена Opera Mini  и зеленым аппараты с высоким разрешением(320х240 и выше),  которые выпущены сравнительно недавно и имеют приличный броузер и с которыми проблем мало(но есть). Мобильные броузеры можно условно разделить на несколько классов:

Class А:

  • отличная поддержка XHTML 1.0
  • хорошая поддержка HTML5, частичная поддержка canvas и offline storage
  • хорошая поддержка CSS , включая большую часть  CSS Level 2.1 (оценка 90 и выше в ACID2 тесте) и основное CSS Level 3 (оценка 75 и выше в тесте ACID3).
  • поддержка элементов с абсолютным позиционированием, float, clear, overflow, clip и т.п.
  • поддержка image replacement techniques(замена элементов картинками)  background:url(img/img.jpg).
  • отличная  поддержка javascript
  • поддержка DOM событий и AJAX
  • сопоставим по возможностям с десктопными аналогами.

Class B:

  • отличная поддержка XHTML 1.0
  • хорошая поддержка CSS Level 2.1 (оценка 75 и выше в тесте ACID2)
  • padding, border, и margin поддерживаются корректно
  • можно менять цвет текста, ссылок и фона
  • поддержка image replacement techniques
  • минимальная ширина экрана 164 px.
  • поддерживает сложные таблицы, не обязательно вложенные
  • установка размера фонта в 10 px возможна и и текст остается читаем
  • ограниченная поддержка Javascript

Class C:

  • хорошая поддержка XHTML 1.0
  • частичная поддержка CSS Level 2.1 (оценка 75 и выше в тесте ACID2)
  • частичная поддержка Javascript или не поддерживается

Class D:

  • базовая поддержка  XHTML
  • минимальная ширина экрана 120 px
  • гиперссылки могут не поддерживать изменение цвета через CSS
  • базовая поддержка таблиц
  • colspan и rowspan могут не поддерживаться
  • input type=»file» не поддерживается
  • “Width” указанное в процентах, может отображаться некорректно
  • Javascript  не поддерживается

Class F

  • CSS не поддерживается или работает частично
  • Таблицы не поддерживаются или частично
  • поддержка только основных элементов форм text field, select option, submit button
  • input mask может не поддерживаться
  • Javascript  не поддерживается

Увы точной статистики по классам броузеров получить не удастся, поскольку деление весьма условно. Но можно с уверенностью сказать опираясь на предыдущий график, что броузеры классов D и F занимают не менее 13%. Аппараты из зеленой зоны могут иметь броузер как класса А так и класса С. Opera mini в зависимости от версии является броузером классов A, B и С.  К примеру Opera для iPhone броузер класса B. Safari Mobile, Firefox mobile, Opera mini for Anroid — броузеры  А класса. классы мобильных броузеровСреднюю температуру по больнице я бы оценил так .  Т.е. примерно половина устройств имеет нормальный броузер(B). Не менее 15% имеет отличный броузер(A) и до трети пользователей имеет броузер  с нарушением слуха, зрения и некоторыми умственными отклонениями который весьма отличается от десктопного Хрома или Файрефокса и отнюдь не в лучшую сторону. Верстка под такие устройства имеет свои особенности. Мною сверстано немало wap 1\2 сайтов, за более чем 7 лет работы фрилансером  и набито немало шишек и именно о них и пойдет речь в следующей статье.

You may also like...