чашкин иван

1,816 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,816
On SlideShare
0
From Embeds
0
Number of Embeds
1,356
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

чашкин иван

  1. 1. почта mail.rutel.mail.ru m.mail.ru touch.mail.ruбазовая версия для почта для телефонов и для современных тачевыхтелефонов смартфонов устройств
  2. 2. Концепция
  3. 3. Graceful degradation Уже есть tel и m версии Пальцы вместо кнопок Ресурсы
  4. 4. УстройстваAndroid, iOSA (iPhone, Andoroid 4) должна включать всебя векторные иконки, жесты для зума и не 4нативный скролл, загрузка файлов.
  5. 5. УстройстваAndroid, Bada, Symbian, BlackberryA (iPhone, Andoroid 4) должна включать всебя векторные иконки, жесты для зума и не 4нативный скролл, загрузка файлов.B ( < Android 3, Bada, Symbian, Blackberry)отключены функции жестов в письмах и ненативный скролл, шапка фиксирована. 3
  6. 6. УстройстваWindows Phone, Symbian, MeeGoA (iPhone, Andoroid 4) должна включать всебя векторные иконки, жесты для зума и не 4нативный скролл, загрузка файлов.B ( < Android 3, Bada, Symbian, Blackberry)отключены функции жестов в письмах и ненативный скролл, шапка фиксирована. 3C ( Windows Phone, Symbian, MeeGo )иконки заменены на растр, шапка нефиксирована.
  7. 7. УстройстваiOSВ целом все хорошоAndroidТормоза и нестабильность поддерживаемого функционалаBada, Symbian, BlackberryОчень похожи на андроидWindows PhoneСлабая поддержка CSS3 и проблемы с JS
  8. 8. iOS -webkit-user-select:none;
  9. 9. iOS -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  10. 10. iOS -webkit-text-size-adjust:none;
  11. 11. CSS Transform 3D has3d = "WebKitCSSMatrix" in window && "m11" in new WebKitCSSMatrix();
  12. 12. Добавить в «Домой»- window.navigator.standalone
  13. 13. Android
  14. 14. События Android 4 Android 2.3 iOS 5.1TouchStart 70 52 76TouchEnd 55 35 70TouchCancel 0 3 0TouchMove 189 87 122
  15. 15. Клики 300ms
  16. 16. Input focusСтранный placeholder<label class="form__row__label"> <span class="form__row__name">Кому:</span> <span class="form__row__input"> <input type="text" /> </span></label>
  17. 17. Input & fixed & links
  18. 18. Height & absolute
  19. 19. Общее о web-appПроблемы с сетью
  20. 20. Free WiFiСтраницы приветствия
  21. 21. Free WiFiСтраницы приветствия <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>…</title> <meta http-equiv="refresh" content="…" /> </head> <body> … </body> </html>
  22. 22. Viewport<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0" />
  23. 23. Apple<meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="yes" /><link rel="apple-touch-icon" href="…" />
  24. 24. Meta<meta name="format-detection" content="telephone=no" /><meta name="format-detection" content="email=no" />
  25. 25. InputСпецифичные параметрыautocorrect=“off”autocapitalize=“off”
  26. 26. iScroll http://cubiq.org/iscroll-4 Last code update: 2012.07.14 – v4.2 Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.
  27. 27. СПАСИБО! Егор Дыдыкин, Иван Чашкин Front-end разработчикиe.dydykin@corp.mail.ru, i.chashkin@corp.mail.ru

×