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