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

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

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

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

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

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

Любая подсказка, почему?

68 голосов | спросил Crashalot 14 MarpmMon, 14 Mar 2011 22:13:02 +03002011-03-14T22:13:02+03:0010 2011, 22:13:02

5 ответов


0

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

  1. В идеале вы бы это исправили, используя методы адаптивного веб-дизайна , чтобы заставьте свой дизайн адаптироваться к размерам экрана мобильного устройства (в этом случае у вас больше не будет очень широких блоков, чтобы мобильные браузеры больше не регулировали размеры шрифта).

  2. Если это не вариант, и вы застряли, предлагая сайт для мобильных устройств пользователям мобильных устройств, посмотрите, сможете ли вы настроить свой дизайн так, чтобы ни один из ваших текстовых блоков не был шире ширины устройства мобильного устройства ( например, 320 пикселей для многих портретных телефонов) (вы можете использовать css для мобильных устройств, чтобы избежать влияния на браузеры настольных компьютеров), тогда Mobile Safari не нужно будет увеличивать размеры шрифтов (и браузеры, которые переформатируют текст, такие как браузер Android и Opera Mobile, также не нужно менять макет).

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

Редактировать: например, в вашем случае самый простой - это, вероятно, 2-й вариант, так что вы можете попробовать добавить следующий 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;
    }
}

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

ответил John Mellor 4 PMpMon, 04 Apr 2011 18:56:20 +040056Monday 2011, 18:56:20
0

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

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

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

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

ответил Crashalot 26 AMpTue, 26 Apr 2011 07:42:03 +040042Tuesday 2011, 07:42:03
0

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

ответил Webreality 13 MaramWed, 13 Mar 2013 01:31:36 +04002013-03-13T01:31:36+04:0001 2013, 01:31:36
0
-webkit-text-size-adjust:none;

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

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

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

ответил Thomas Maas 22 MarpmTue, 22 Mar 2011 12:11:44 +03002011-03-22T12:11:44+03:0012 2011, 12:11:44
0

В моем случае у меня был элемент <p>, и я решил эту проблему, добавив:

width: fit-content;

К этому. Мне удалось воспроизвести это и на мобильном телефоне Safari.

ответил Christian Adam 26 +03002018-10-26T17:25:20+03:00312018bEurope/MoscowFri, 26 Oct 2018 17:25:20 +0300 2018, 17:25:20

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132