CSS-хак для Мака/айФона/айПада

[SelenIT]

Столкнулся с очередной траблой при внедрении кастомных шрифтов: на эпловских устройствах (включая Мак-мини) они позиционируются по вертикали по-другому (ближе к верху строчного бокса), чем на виндовых машинах. Из-за этого заголовок с плавающей иконкой под маком/айфоном/айпадом выглядят некузяво (словно иконка вниз сползла, хотя по факту, наоборот, вверх уполз заголовок). Игры с line-height и vertical-align не помогают — на маке всё равно всё по своему. Не вижу иного выхода, как явно подпереть одну из платформ специфическими для нее отступами, но столкнулся с проблемой: как в CSS опознать платформу? Встречающиеся в поиске решения нацелены либо на движок Webkit (что мне не нужно, т.к. под виндами он ведет себя вполне адекватно, а FF под Маком как раз проблемит), либо опираются на особенности мобильных айДевайсов (screen only and -webkit-что-то), не захватывая десктопные Маки.

Можно ли всё-таки определить с помощью CSS-хаков именно платформу? Возможно, легче будет, наоборот, отличить винду от остального?

[Great Rash]

  Quote

выглядят некузяво

Блин, только одного человека знал который так говорил! Do i know you?

  Quote

Можно ли всё-таки определить с помощью CSS-хаков именно платформу?

Я бы не стал полагаться на CSS-хаки, уж слишком ненадежная вещь... Может лучше задействовать скрипты?

[SelenIT]

Скрипты привлекать ради такой мелочи не хочется... по-хорошему, конечно, хотелось бы разобраться в причине и пофиксить именно ее, но если уж без костылей никак — то отделаться минимальными...

А насчет "некузяво" — это, по-моему, довольно известный "мем", авторства Людмилы Петрушевской (из сказки начала 80-х про "бутявку")...

[Vlad]

Разве что подобная штука прокатит. Некузяво, конечно выглядит, но что делать.

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

[SelenIT]

К сожалению, не прокатит — десктопные маки тоже надо охватить... И, имхо, в фильтре для айфонов пора ставить max-device-width не 480px, а 960 — чтобы и 4-й охватить (удачно сложилось, что у айПада всё равно больше).

[rash]

SelenIT, могу ошибаться, но четверка репортит странице, что у нее все равно 480, «дополнительные пиксели» только повышают четкость.

То есть линия в 1px будет одинаковой ширины на разных экранах, просто на более четком она в ширину займет 2 физических пикселя, но по-прежнему один «виртуальный».

Надо будет по возможности проверить.

[Vlad]

Тогда только скрипты.

[rash]

А можно скриншоты обоих версий посмотреть? В смысле и из-под винды и из-под мака? Ну и код, если возможно.

[SelenIT]

  Quote

четверка репортит странице, что у нее все равно 480, «дополнительные пиксели» только повышают четкость

Вау, и действительно. Правда, 960 у меня тоже работал, но более универсальный вариант, конечно, лучше. Вообще, как я смотрю, мобильные эпловские девайсы ближе всех приблизились к реализации давешней тёминой мечты...