Некорректно отображается текст на ipad

@seregamurman · Регистрация: 08.07.2014

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

Всем привет! Помогите пожалуйста разобраться что не так!
Сайт sledd.ru

Проблема в блоке с телефонами в правом-верхнем углу. На компьютерах отображается нормально, а вот на АйПаде текст как будто не уменьшается и пропадает класс для (span) нижнего телефона. Думаю по изображению поймёте о чём я говорю.

@radprog · 30.07.2014, 12:46

вместо своего текущего класса .tel поставь этот и все будет нормально

CSS
1
2
3
4
5
6
7
8
.tel {
width: 140px;
height: 52px;
float: right;
font-size: 19px;
padding: 14px 15px 15px 0px;
text-shadow: 0px 1px #fff;
}

@seregamurman · 30.07.2014, 14:23 **[ТС]**

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

@radprog · 30.07.2014, 14:26

Тогда придется задавать все размеры блоков и текста внутри них в процентах, в таком случае при масштабировании страницы все будет оставаться на местах.

@Lovrentiy · 30.07.2014, 14:32

разве медиа запросы не могут помочь?

@seregamurman · 30.07.2014, 17:49 **[ТС]**

А как можно применить медиа запрос в моей ситуации?

Добавлено через 24 секунды
Прочитал статью http://htmlbook.ru/css/value/media, не совсем понял что нужно сделать.

Добавлено через 3 часа 5 минут
=) Разобрался в медиа, но у меня кажется другая проблема. Сам стиль действует только на первую цифру 8 + слетает стиль для остальных цифр.

@radprog · 30.07.2014, 20:03

Современные мобильные устройства обычно масштабируют страницу, чтобы она вся отображалась на экране.
Это не всегда удобно. Чтобы изменить данное поведение браузера, нужно использовать тег meta с атрибутом viewport. Например:
<meta name="viewport" content="width=900" />

@seregamurman · 01.08.2014, 09:29 **[ТС]**

Ребят, всем на будущее. Проблема была в том, что ipad автоматически распознаёт телефон и преобразует его в ссылку, чтобы этого не происходило, необходимо прописывать следующее:
Для Safari (iPhone / IPod / IPad) и Android браузера

HTML5
1
<meta name="format-detection" content="telephone=no">

Для BlackBerry

HTML5
1
<meta http-equiv="x-rim-auto-match" content="none">

Добавлено через 15 часов 57 минут
И ещё момент - слетает шрифт в шапке и верхней навигации (с Calibri на Arial или нечто похожее), есть идеи?

Добавлено через 19 часов 33 минуты
Проблему с шрифтом решил. Оказалось проблема в том, что если некоторым элементам дополнительно прописывать в стилях шрифт(помимо общего body), то его величество ipad, начинает брезговать такими условиями.

В общем думаю тему можно закрывать. Спасибо всем за наводки!!!

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@seregamurman 2 / 2 / 1 Регистрация: 08.07.2014 Сообщений: 8

	Некорректно отображается текст на ipad 30.07.2014, 12:40. Показов 7254. Ответов 7 Метки нет (Все метки) Всем привет! Помогите пожалуйста разобраться что не так! Сайт sledd.ru Проблема в блоке с телефонами в правом-верхнем углу. На компьютерах отображается нормально, а вот на АйПаде текст как будто не уменьшается и пропадает класс для (span) нижнего телефона. Думаю по изображению поймёте о чём я говорю. 0

@seregamurman 2 / 2 / 1 Регистрация: 08.07.2014 Сообщений: 8
	30.07.2014, 14:23 [ТС]
	То есть проблема всего лишь в размере шрифта? А есть вариант, при котором он просто будет трансформироваться в более меньший при отображении на планшете? Дело в том, что хотелось бы именно такие пропорции текста на сайте. 0

@radprog 0 / 0 / 1 Регистрация: 14.08.2013 Сообщений: 11
	30.07.2014, 14:26
	Тогда придется задавать все размеры блоков и текста внутри них в процентах, в таком случае при масштабировании страницы все будет оставаться на местах. 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	30.07.2014, 14:32
	разве медиа запросы не могут помочь? 0

@seregamurman 2 / 2 / 1 Регистрация: 08.07.2014 Сообщений: 8
	30.07.2014, 17:49 [ТС]
	А как можно применить медиа запрос в моей ситуации? Добавлено через 24 секунды Прочитал статью http://htmlbook.ru/css/value/media, не совсем понял что нужно сделать. Добавлено через 3 часа 5 минут =) Разобрался в медиа, но у меня кажется другая проблема. Сам стиль действует только на первую цифру 8 + слетает стиль для остальных цифр. 0

@radprog 0 / 0 / 1 Регистрация: 14.08.2013 Сообщений: 11
	30.07.2014, 20:03
	Современные мобильные устройства обычно масштабируют страницу, чтобы она вся отображалась на экране. Это не всегда удобно. Чтобы изменить данное поведение браузера, нужно использовать тег meta с атрибутом viewport. Например: <meta name="viewport" content="width=900" /> 0

Некорректно отображается текст на ipad

Решение