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

Question 1

Наш сайт відображає невідповідні розміри шрифтів у мобільному Safari - і, наскільки ми можемо зрозуміти, лише в Mobile Safari. Це нас дуже тупило.

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

1) Відвідайте http://www.panabee.com .

2) Проведіть пошук доменного імені.

Поля зліва показують неправильний розмір шрифту. Розмір шрифту повинен відповідати розміру шрифту з правого боку (як заголовки вікон, так і копія поля). Наприклад, заголовки "Варіації" та "Twitter" набагато більші за заголовок "Альтернативні закінчення".

Будь-яка підказка, чому?

Question 2

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.

Редагувати: наприклад, у вашому випадку найпростіший - це, мабуть, друга альтернатива, тому ви можете спробувати додати такий 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.

Question 3

Ось що в кінцевому підсумку вдалося (протестовано лише на iPhone 4 tho):

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

Відповідь ми присудили Джону, оскільки його рішення було покладено в основу цього.

Можливо, не найелегантніша відповідь, але вона працює.

Question 4

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

Question 5

-webkit-text-size-adjust:none;

напевно вирішить вашу проблему.

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

як і раніше збільшує масштаб, але зберігає його на 80% менше, ніж веб-комплекти за замовчуванням.

Question 6

У моєму випадку у мене був <p>елемент, і я вирішив цю проблему, додавши:

width: fit-content;

До нього. Мені вдалося відтворити це і на мобільному телефоні Safari.

Question 7

Я вирішив проблему з розмірами шрифтів, використовуючи hack css для додатка IOS та браузера safari IOS.

@supports (-webkit-touch-callout: none) {
       //you can write your custom css for IOS safari browser.
     }