Исправить размер шрифта на Mobile Safari (iPhone), где текст отображается непоследовательно, а некоторые шрифты больше других?

Наш сайт отображает с несогласованными размерами шрифтов на мобильном Safari - и, насколько мы можем судить, только Mobile Safari. Это очень нас насторожило.

Мы проанализировали сайт с Firebug, а неправильные области наследуем правильные стили, но шрифты по-прежнему отображаются с неправильными размерами.

1) Посетите http://www.panabee.com.

2) Проведите поиск имени домена.

В боксах с левой стороны отображаются неправильные размеры шрифта. Размер шрифта должен соответствовать размеру шрифта с правой стороны (оба заголовка окна и копия окна). Например, названия "Вариации" и "Twitter" намного больше названия "Альтернативные окончания".

Какая-нибудь подсказка почему?

Ответ 1

Мобильное Safari (например, Chrome для Android, Mobile Firefox и IE Mobile) увеличивает размер шрифта из широких блоков (всегда), так что если вы дважды коснитесь, чтобы увеличить масштаб этого блока (который соответствует блоку ширина экрана), текст будет разборчивым. Если вы установите -webkit-text-size-adjust: 100% (или none), он не сможет это сделать, и поэтому, когда пользователь дважды нажимает для увеличения на больших блоках, текст будет нечетко малым; пользователи смогут прочитать его, если они увеличит масштаб изображения, но тогда текст будет шире, чем экран, и им придется панорамировать по горизонтали, чтобы читать каждую строку текста!

В идеале вы исправите это, используя методы Отзывчивый веб-дизайн, чтобы ваш дизайн адаптировался к размерам мобильного экрана (в этом случае вы больше не будет иметь очень больших блоков, поэтому мобильные браузеры больше не будут изменять размер шрифта).
Если это не вариант, и вы застряли в обслуживании настольного сайта для мобильных пользователей, а затем посмотрите, можете ли вы настроить свой дизайн, чтобы ни один из ваших блоков текста не был больше ширины устройства мобильного устройства ( например, 320 пикселей для многих портретов) (вы можете использовать css для мобильных устройств, чтобы не влиять на настольные браузеры), тогда Mobile Safari не нужно будет увеличивать размеры шрифтов (и браузеры, которые обновляют текст, например Android Browser и Opera Mobile, также не нужно будет менять свой макет).
Наконец, если вам действительно необходимо, чтобы Mobile Safari не регулировал размер шрифта, вы можете установить -webkit-text-size-adjust: 100%, но сделать это только в качестве последнего средства, поскольку это может привести к появлению мобильных пользователей трудно читать текст, так как он будет слишком маленьким, или им придется кастрюлю из стороны в сторону после каждой строки, которую они читают. Обратите внимание, что вы должны использовать 100% not none, потому что нет никаких неприятных побочных эффектов в настольных браузерах. Существуют также эквивалентные свойства -moz-text-size-adjust и -ms-text-size-adjust для Mobile Firefox и IE Mobile.

Изменить: например, в вашем случае простейшим является, вероятно, вторая альтернатива, поэтому вы можете попробовать добавить следующий CSS:

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
    table#all_results {
        width: auto;
    }
    td#main_box {
        width: 320px;
    }
    td#side_box {
        width: 320px;
    }
}

Хотя это не идеально для hardcode 320px, как это; вы можете улучшить это, используя разнообразные запросы в формате CSS или получить ширину устройства от JavaScript.

Ответ 2

Вот что в конечном итоге сработало (тестировалось только на iPhone 4 tho):

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {      
        td#main_box { -webkit-text-size-adjust:100% }               
}

Мы дали ответ Джону, так как его решение стало основой этого.

Вероятно, не самый элегантный ответ, но он работает.

Ответ 3

-webkit-text-size-adjust: none; приведет к тому, что вы не сможете увеличить число мобильных устройств. Вместо этого следует использовать 100%.

Ответ 4

-webkit-text-size-adjust:none;

вероятно, решит вашу проблему.

target-element { -webkit-text-size-adjust:80% }

будет продолжать увеличиваться, но сохраняет его на 80% меньше, чем веб-киты по умолчанию.