Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ThinkPHP #7: Адаптация веб-сайта под различные ...

ThinkPHP #7: Адаптация веб-сайта под различные дисплеи

thinkphp_com_ua

July 25, 2013
Tweet

More Decks by thinkphp_com_ua

Other Decks in Programming

Transcript

  1. План • Чем различаются дисплеи? • Что можно оптимизировать? •

    Какова польза от оптимизации? • Responsive web design • Настройка “meta Viewport” • Некоторые хитрости • Как тестировать?
  2. Чем различаются дисплеи? • Физические размеры • Соотношение сторон •

    Плотность пикселов • «Привычное удаление от глаз» • Цветовые характеристики • Разрешение • Контрастность • Яркость • Время отклика • Угол обзора • …
  3. Плотность пикселов Android. Generalized pixel density. Название Описание в спецификации

    Density LDPI Low density. Small screens are at least 426dp x 320dp. ~120 ppi MDPI Medium density. Normal screens are at least 470dp x 320dp. ~160 ppi HDPI High density. Large screens are at least 640dp x 480dp. ~240 ppi XHDPI Extra high density. Xlarge screens are at least 960dp x 720dp. ~320 ppi http://developer.android.com/guide/practices/screens_support.html# Чем различаются дисплеи?
  4. Разрешение 5.55“, 267 ppi 720 x 1280 px 360 x

    640 dip 4“, 326 ppi 640 × 1136 px 320 x 568 dip Чем различаются дисплеи? 2.4“, 167 ppi 320 × 240 px 320 × 240 dip
  5. Доступность информации Что можно оптимизировать? • На сколько легко читается

    текст? • Видны ли иллюстрации / иконки? • Видны кому-то кроме вас? ;) • Правильно ли расставлены акценты?
  6. Примеры Media Queries Responsive web design / Как организовать код?

    Пример 1: <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> Пример 2: @media screen { * { font-family: sans-serif } } Пример 3: <link rel="stylesheet" media="screen and (color)" href="example.css" /> Пример 4: @import url(color.css) screen and (color); http://www.w3.org/TR/css3-mediaqueries/#
  7. Media Queries Responsive web design / Как организовать код? #pagewrap

    { width: 980px; margin: 0 auto; } @media screen and (max-width: 980px) { #pagewrap { width: 95%; } #content { width: 60%; padding: 3% 4%; } #sidebar { width: 30%; } } @media screen and (max-width: 480px) { ...
  8. Как всё-таки организовать код? Разбивать ли «размеры» на файлы? Responsive

    web design • Учитываем быстродействие • Учитываем удобство написания кода
  9. Responsive web design • Что делать с изображениями в контенте?

    • Что делать с колонками? • Что делать с изображениями в колонках? • Относительные или фиксированные величины ширины блоков? FAQ
  10. Настройка “meta Viewport” http://frontender.com.ua/mobile-web/wtf-viewport/# <!doctype html> <html> <head> <meta name="viewport"

    content="width=device-width"> Атрибут Возможное значение width Целое неотрицательное значение (от 200px — 10,000px) или константа device- width. Если ширине не указана, в мобильном Safari устанавливается значение 980px, в Opera — 850px, в Android WebKit — 800px, а в IE — 974px. height Целое неотрицательное значение (от 223px до 10,000px) или константа deviceheight initial-scale Число с точкой (от 0.1 до 10). Значение 1.0 — не масштабировать user-scalable no или yes minimum-scale Число с точкой (от 0.1 до 10). 1.0 — не масштабировать maximum-scale Число с точкой (от 0.1 до 10). 1.0 — не масштабировать Responsive web design / “meta Viewport”
  11. http://frontender.com.ua/mobile-web/wtf-viewport/# Пример 1. На устройствах с HDPI (240dpi) не будет

    масштабирования. <meta name="viewport" content="target-densitydpi=high-dpi" /> Пример 2. На устройствах с MDPI (160dpi) не будет масштабирования. Такое значение dpi установлено по-умолчанию. <meta name="viewport" content="target-densitydpi=medium-dpi" /> Настройка “meta Viewport” Android и target-densitydpi Responsive web design / “meta Viewport”
  12. Media Queries в Internet Explorer 8 Некоторые хитрости Internet Explorer

    8- не поддерживает CSS3 media queries. Можете подключить «Media Queries Javascript». <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com /svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
  13. – “Хочу, чтобы везде отображалось хорошо, а на iPhone 5

    - идеально!” Некоторые хитрости Зная, что у iPhone 5 очень специфическое соотношение сторон (а именно 40/71 ) мы можем писать стили исключительно для данного устройства, используя свойство device-aspect-ratio: @media screen and (device-aspect-ratio: 40/71) { /* styles for iPhone 5 */ }
  14. Как тестировать? Opera Mobile Emulator + Dragon Fly Как подключить

    Dragon Fly к OperaMobileEmulator: http://www.opera.com/dragonfly/documentation/remote/#