Ответ 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%notnone, потому что нет никаких неприятных побочных эффектов в настольных браузерах. Существуют также эквивалентные свойства-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.