Деякі розміри шрифту на Сафарі (iPhone) відображаються більшими

110

Чи є CSS чи інші причини, чому Safari / iPhone ігнорує деякі параметри розміру шрифту? На моєму конкретному веб-сайті Safari на iPhone надає певний розмір шрифту: 13px тексту більше, ніж розмір шрифту: 15px. Можливо, він не підтримує розмір шрифту для деяких елементів?

— Олексій
джерело

248

Відповідь Джо має деякі найкращі найкращі практики, але я думаю, що проблема, яку ви описуєте, полягає в тому, що Mobile Safari автоматично масштабує текст, якщо він вважає, що текст стане занадто малим. Ви можете обійти це за допомогою властивості CSS -webkit-text-size-adjust. Ось приклад того, як застосувати це до свого тіла, лише для iPhone:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

— Девід Канеда
джерело

2

Щойно наткнувся на це питання. Цей маленький медіа-хакер працює бездоганно. Почну вбудовувати його у свій CSS-файл.

— Throttlehead

1

Нічого собі, хворий! Мене зводило з розуму, я навіть спробував змінити назву класу та встановити css inline з jQuery, перш ніж я це знайшов. Рятувальник!

— Крістофер Бубах

1

Це дуже допомогло. Ура :)

— Мертва людина

2

Обов’язково використовуйте медіа-запит. Здається, що це може зробити текст важким для читання: Остерігайтеся -webkit-text-size-

— prilagod

9

Відповідь має бути оновлено до -webkit-text-size-adjust: 100%- це дозволяє уникнути автоматичного оновлення, але дозволяє збільшити масштаб, ініційований користувачем. (джерело)

— Шон Еркхарт

14

Використовуйте 100% замість None.

normalize.css включає це

— user3276706
джерело

11

Також переконайтеся, що ви встановили початковий параметр збільшення в метатезі вашого перегляду:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

— johnpolacek
джерело

7

Я більше не використовую визначення пікселів, оскільки вони дійсно заплутані і зовсім не однакові у візуальних сервісах.

Зустрічайте підрозділи

"Ems" (em): "em" - це масштабований блок, який використовується у веб-документах. Em дорівнює поточному розміру шрифту, наприклад, якщо розмір шрифту документа становить 12pt, 1em дорівнює 12pt. Ems є масштабованим за своєю суттю, тому 2em дорівнював би 24pt, .5em дорівнював би 6pt і т.д.
Пікселі (px): пікселі - це одиниці фіксованого розміру, які використовуються на екрані носія (тобто для читання на екрані комп'ютера). Один піксель дорівнює одній крапці на екрані комп’ютера (найменший поділ роздільної здатності екрана). Багато веб-дизайнерів використовують піксельні одиниці у веб-документах для того, щоб створити ідеальне зображення пікселів для свого веб-сайту під час відображення у веб-переглядачі. Одна з проблем із піксельною одиницею полягає в тому, що він не збільшує масштаб вгору для читачів із вадами зору або вниз, щоб підходити до мобільних пристроїв.
Окуляри (pt): бали традиційно використовуються в друкованих засобах масової інформації (все, що потрібно друкувати на папері тощо). Одна точка дорівнює 1/72 дюйма. Окуляри схожі на пікселі, оскільки вони є одиницями фіксованого розміру і не можуть масштабуватись за розмірами.
Відсоток (%): Одиниця відсотка приблизно нагадує одиницю "em", за винятком кількох принципових відмінностей. Перш за все, поточний розмір шрифту дорівнює 100% (тобто 12pt = 100%). Використовуючи одиницю відсотків, ваш текст залишається повністю масштабованим для мобільних пристроїв та доступності.

4

Відповідь - використовувати 1 попередньо визначений блок для тексту (тобто 12pt), а потім для всіх наступних визначень css використовувати розмір шрифту: 90%; або розмір шрифту: 110%; тощо тощо. Це легше доступно для всіх підтримуваних вами пристроїв.

1

Ви забули найважливіше: REM (посилання EM). Ви можете використовувати його в усьому документі, і він залишається однаковим (це не каскадно).

— Ендрю Свіфт

3

Ця відповідь не є актуальною і жодним чином не відповідає на питання. Питання полягало в тому, що тексти однакового розміру відображаються по-різному, а не про те, які одиниці використовувати. Проблема залишається там, де б не використовувались одиниці.

— Rauli Rajande

0

У мене була така ж проблема, виявляється, в оригінальному CSS був такий рядок:

-webkit-text-size-prilagod: 120%;

Мені довелося змінити його на 100%, і все пройшло гладко. Не потрібно змінювати всі px на em або %%.

— me1974
джерело

Дизайнер у будь-якому разі повинен використовувати em для розміру шрифту.

— Нік Тернер

2

... за винятком CSS тега body, де найкращий розмір px.

— Метт Паркінс

0

Також перевірте, чи не встановлено "ширину / висоту" для елементів, якими ви керуєте, Safari надає перевагу розміру над розміром шрифту у SVG, Chrome і FF, хоча, здається, наразі принаймні.

— маребуфі
джерело