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

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

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

2. если это не вариант, и вы застряли, обслуживая сайт рабочего стола для мобильных пользователей, то см. если вы можете настроить ваш дизайн, так что ни один из ваших блоков текста шире, чем мобильные устройства-ширина (например, 320 пикс для многих портретных телефонов) (вы можете использовать мобильную версию CSS, чтобы избежать влияния настольных браузеров), то мобильный сафари не нужно увеличивать любой размер шрифта (и браузеры, переформатирование текста, как на Андроид браузер и опера Мобайл, и не нужно менять раскладку).

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;
    }
}

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