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

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

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

1) посещение http://www.panabee.com.

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

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

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

4 67
css fluid-layout iphone mobile mobile-safari

4 ответа:

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

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

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

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

Edit: например, в вашем случае самый простой, вероятно, является 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 media, или получить ширину устройства из JavaScript.

135

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

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

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

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

36

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

5
-webkit-text-size-adjust:none;

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

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

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

3