Jump to content
  • 0

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


SelenIT
 Share

Question

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

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

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy