Будущее не ждали...

...а оно припёрлось.

Впервые одним из главных требований к сайту выдвинули 100% адекватную работу на мобильных платформах: гугловской и эппловской.

Как на грех, именно этот сайт визуально сильно наворочен, анимирован, аяксирован, поэтому пришлось детектить мобильную платформу и выдавать модифицированные под неё яваскрипты, шалоны, стили (сразу: гуглить Mobile_Detect.php).

Дальше съездил втарил Iconia Tab.

Дальше стал изучать матчасть.

Первое: все мобильные браузеры по умолчанию подгоняют страницу к размеру окна, корректно (по своему мнению) меняя кое-что в отображении. Поэтому, как минимум, надо чётко соблюдать границы документа и не размещать чего-то абсолютно позиционированного на полях, потому что оно может выпасть.

Второе и главное: до сих пор пиксел был пикселом. Больше этого нет. Аминь.

Пояснение: пиксел графики, пиксел в CSS соответствовал одному пикселу экрана. У мобильных устройств это (довольно) частный случай. Разрешение экрана, как правило, выше, чем у настольных дисплеев. Происходит пересчёт по коэффициенту, который у большинства устройств колеблется от полутора до двух. То есть примерно то, что делают телевизионные панели с аналоговым эфирным сигналом (и там результат таков, что я до сих пор смотрю кинескоп).

Из этого следует, что пиксельная точность зачастую недостижима даже теоретически. Вот это я понимаю - разрыв шаблона!

По аналогии с телепанелями, картинки становятся говёнными. Потому что, понятно, они увеличиваются в полтора-два раза, чтобы занимать то же место в документе. Парадоксально, но факт: чем выше разрешение дисплея у планшета, чем хуже он показывает веб-графику. Лидируют здесь айпады со своей ретиной. Это полностью в логике новейшей техноэкономики: за максимальную цену вы получаете максимально худший результат :-)

Варианты костылей:

1. Делать все картинку двухкратными, и масштабировать средствами CSS с учётом коэффициента конкретного устройства. Это увеличенный траффик и восторг фотодрочеров, вылизывающих кадр до выставочного состояния, чтобы потом какой-нибудь браузер его тупо уменьшил на N% по своему алгоритму.
   
2. Делать графику под дисплей пиксел-на пиксел отдельно, под два-на-пиксел отдельно... под полтора-на-пиксел отдельно... Создавать превьюшки скриптами во всех этих вариантах для загружаемых изображений... ахтунг...
   
3. Частичное решение проблемы - применение SVG, причём частичное в квадрате, потому что и поддержка SVG разнится у разных браузеров, разных версий, итэпэ.

 
Дальше, мобильные браузеры обычно масштабируют шрифты, причём это пользовательская настройка. Оно и раньше так было, но теперь это по умолчанию. Теперь смотрим: если текст как-то соотносится с фоновой картинкой, при этом текст растризуется с коэффициентом полтора плюс ещё 15%, а фон увеличивается на 50%, то, короче говоря, избегайте соотносить текст с фоном: всё равно не стрельнет.

И это только первое, с чем столкнулся. Подозреваю, далеко не последнее.

Как сказал один еврей, I've seen the future, brother: it is murder.