Не срабатывает font-size на iPhone

@sasha0012 · Регистрация: 21.06.2012

Студворк — интернет-сервис помощи студентам

Всем привет!

Впервые сталкиваюсь с таким явлением, может кто-то уже замечал подобное. Сделал мобильную версию сайта, и если пользователь заходит с телефона, то подгружаю стили для мобильной версии иначе стили для ПК.

Странность в том, что когда я просматриваю сайт с андройда, то все отображается корректно, но если зайти с айфона (любой версии), то стили не применяются. В частности не срабатывает этот кусок кода:

Для ПК:

CSS
1
font-size:1.3vw;

Для айфона:

CSS
1
font-size:2.5em;

@shvyrevvg · 19.09.2018, 15:58

Сообщение от sasha0012

Сделал мобильную версию сайта

sasha0012, а как Вы определяете устройство?

@sasha0012 · 19.09.2018, 17:21 **[ТС]**

shvyrevvg, по HTTP_USER_AGENT. Мобильник определяется корректно, так как в мобильной версии другая верстка. Но размер шрифта в андройдах нормальный (как в стилях определен) а в айфонах текст мелкий.

@shvyrevvg · 19.09.2018, 17:39

*del

Добавлено через 1 минуту
sasha0012, а через эмуляцию все нормально? Похоже что не те стили отдаются.

Добавлено через 6 минут
Я имею ввиду, в developer tools поиграться с user agent.

Dmitry · 19.09.2018, 17:39

Сообщение от sasha0012

в айфонах текст мелкий

в "настоящем" браузере (типа Safari и т.п.) или в CNA?

@sasha0012 · 19.09.2018, 17:54 **[ТС]**

shvyrevvg, и через эмуляцию, и с реального устройства текст мелкий. user agent здесь не играет роли. Мобильное устройство определяется нормально.

Dmitry, да, в браузере Safari.

@shvyrevvg · 19.09.2018, 18:03

sasha0012, а инспектор что показывает(computed styles в том числе)?

@sasha0012 · 19.09.2018, 18:47 **[ТС]**

Сообщение от shvyrevvg

а инспектор что показывает(computed styles в том числе)?

хороший вопрос. Айфона нет, эмулятор нормальный не могу найти.

Попробовал задать размер в 3.5vw, и текст немного увеличился. значит реагирует, но с масштабом что-то не так. В андройдах 1.5vw смотрится нормально (читабельный текст) а в айфонах нужно 7.5vw прописывать чтобы добиться такого же эффекта. Получается что мне для айфонов нужно другие стили подгружать?

@galawar · 19.09.2018, 20:22

В <head> добавить:

HTML5
1
<meta name="viewport" content="width=device-width, initial-scale=1">

@gogolik · 19.09.2018, 21:00

sasha0012, дайте ссылку на проблемную страницу, или код воспроизводящий её. Посмотрю через всевозможные сафари.

@sasha0012 · 21.09.2018, 12:13 **[ТС]**

galawar, viewport не вариант.

gogolik, ...test.php вот тестовая страница выложенная в сети. А вот ее код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
 
<head>
 
<title>test</title>
 
<style>
.txt p{
font-size:2.1vw;
line-height:240%;
}
</style>
 
</head>
 
<body>
 
<div class='txt'>
    <p>С другой стороны социально-экономическое развитие играет важную роль в формировании всесторонне сбалансированных нововведений. 
    Не следует, однако, забывать о том, что консультация с профессионалами из IT требует от нас анализа дальнейших направлений 
    развитая системы массового участия? Разнообразный и богатый опыт выбранный нами инновационный путь позволяет выполнить важнейшие 
    задания по разработке всесторонне сбалансированных нововведений. Практический опыт показывает, что социально-экономическое развитие 
    позволяет оценить значение направлений прогрессивного развития. Повседневная практика показывает, что начало повседневной работы по
    формированию позиции обеспечивает актуальность соответствующих условий активизации.</p>
    
    <p>С другой стороны социально-экономическое развитие играет важную роль в формировании всесторонне сбалансированных нововведений. 
    Не следует, однако, забывать о том, что консультация с профессионалами из IT требует от нас анализа дальнейших направлений 
    развитая системы массового участия? Разнообразный и богатый опыт выбранный нами инновационный путь позволяет выполнить важнейшие 
    задания по разработке всесторонне сбалансированных нововведений. Практический опыт показывает, что социально-экономическое развитие 
    позволяет оценить значение направлений прогрессивного развития. Повседневная практика показывает, что начало повседневной работы по
    формированию позиции обеспечивает актуальность соответствующих условий активизации.</p>
</div>
 
 
</body>
</html>

размер в андройде и айфоне отличается.

Dmitry · 21.09.2018, 12:28

вы указываете

Сообщение от sasha0012

2.1vw

но, судя по описаниям:
vw – 1% ширины окна
может надо высоту букв "плясать" от высоты окна?
и к тому же, это "относительная" единица. а "плотность пикселей" экранов (число точек на дюйм) у яблок вроде как выше, чем у альтернативных устройств.

@sasha0012 · 22.09.2018, 10:42 **[ТС]**

Dmitry, я задавал относительный размер именно по тому чтобы не привязываться к пикселям (по Вами же упомянутой причине), текст нормально читается когда размер шрифта около 2% относительно ширины экрана. А ширина экрана всегда 100%, не зависимо от плотности пикселей. Видимо у айфонов 1% считается как 0.5%

Сообщение от Dmitry

"плотность пикселей" экранов (число точек на дюйм) у яблок вроде как выше, чем у альтернативных устройств.

И что это означает? Что надо опять костыли писать на php, отлавливать айфоны и подставлять им третий файл со стилями?

Dmitry · 22.09.2018, 11:00

Сообщение от sasha0012

я задавал относительный размер именно по тому...

я догадался, зачем. но пытался указать, что вы устанавливаете ВЫСОТУ шрифта в зависимости от ШИРИНЫ экрана. может правильнее было бы использовать не vw а vh?

Сообщение от sasha0012

И что это означает?

PPI

@AlexZaw · 22.09.2018, 11:28

Сообщение от Dmitry

я догадался, зачем. но пытался указать, что вы устанавливаете ВЫСОТУ шрифта в зависимости от ШИРИНЫ экрана. может правильнее было бы использовать не vw а vh?

А разница то в чем? Просто будет другое цифровое значение.

Сообщение от sasha0012

Получается что мне для айфонов нужно другие стили подгружать?

Можно использовать медиа запросы на плотность пикселей и в зависимости от нее менять размер шрифта

Dmitry · 22.09.2018, 12:16

Сообщение от AlexZaw

А разница то в чем?

не знаю, ход мысли был в том плане, что "высота - к высоте, ширина - к ширине"...

@sasha0012 · 22.09.2018, 19:45 **[ТС]**

Сообщение от AlexZaw

Можно использовать медиа запросы на плотность пикселей и в зависимости от нее менять размер шрифта

видимо это единственное решение этого вопроса.

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

@gogolik · 23.09.2018, 20:55

sasha0012, посмотрел. Вроде всё корректно отображается.
Может попробовать единицы vmin/vmax?

@Mailo · 24.09.2018, 23:30

Айфоны вроде любят свои внутренние стили использовать для некоторых тегов, например для tel, возможно они по приоритетам перебивают ваши стили?

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@sasha0012 1152 / 554 / 320 Регистрация: 21.06.2012 Сообщений: 1,854
	19.09.2018, 17:21 [ТС]
	shvyrevvg, по HTTP_USER_AGENT. Мобильник определяется корректно, так как в мобильной версии другая верстка. Но размер шрифта в андройдах нормальный (как в стилях определен) а в айфонах текст мелкий. 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	19.09.2018, 17:39
	del Добавлено через 1 минуту* sasha0012, а через эмуляцию все нормально? Похоже что не те стили отдаются. Добавлено через 6 минут Я имею ввиду, в developer tools поиграться с user agent. 0

@sasha0012 1152 / 554 / 320 Регистрация: 21.06.2012 Сообщений: 1,854
	19.09.2018, 17:54 [ТС]
	shvyrevvg, и через эмуляцию, и с реального устройства текст мелкий. user agent здесь не играет роли. Мобильное устройство определяется нормально. Dmitry, да, в браузере Safari. 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	19.09.2018, 18:03
	sasha0012, а инспектор что показывает(computed styles в том числе)? 1

@gogolik Супер-модератор 3959 / 2075 / 832 Регистрация: 13.03.2010 Сообщений: 6,841
	19.09.2018, 21:00
	sasha0012, дайте ссылку на проблемную страницу, или код воспроизводящий её. Посмотрю через всевозможные сафари. 1

@gogolik Супер-модератор 3959 / 2075 / 832 Регистрация: 13.03.2010 Сообщений: 6,841
	23.09.2018, 20:55
	sasha0012, посмотрел. Вроде всё корректно отображается. Может попробовать единицы vmin/vmax? 0

@Mailo 178 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,313
	24.09.2018, 23:30
	Айфоны вроде любят свои внутренние стили использовать для некоторых тегов, например для tel, возможно они по приоритетам перебивают ваши стили? 0

Не срабатывает font-size на iPhone

Решение