Question

Добрый день! Такая проблема: вчера поменял шаблон сайта. Шрифт материалов изменил на тот, что был на старом шаблоне, оставил тот же размер 15рх. Всё устраивало, пока не зашёл на сайт с мобильного. Там в статьях отображается такой же размер букв, как и на компьютере, что, на мой взгляд, явный перебор. Как по мне, то для телефона буквы огромные. С прежним шаблоном шрифт в статьях (на телефоне) был меньшего размера - где-то 13рх.

После длительного поиска в интернете, добавил в CSS в @media only screen and (max-width:360px) пункт .eText {font-size: 13px!important;}.

Но это решило лишь половину проблемы - в вертикальном положении телефона шрифт уменьшился до 13рх, а в горизонтальном положении так и остался огромным - 15рх. Добавлял и в другие @media  - результата ноль. Прошу помочь.

Answer 1

Извините, но стилями нельзя прописать условие для горизонтального положения устройства, стили не понимают такого и так адаптировать нельзя, отдельного для вертикального и отдельно для горизонтального.

Comments

Так мне и нужно, чтобы в обоих положениях телефона шрифт был одинаковым - 13рх. А сейчас в одном положении 13рх, а в другом 15 ( и здесь ещё межстрочный интервал минимальный - строчки практически сидят друг на друге).

---

Ну вот смотрите, я сейчас пишу с телефона. И у вас на сайте сейчас аккуратный маленький шрифт, меньший, чем на компьютере. Какой-то параметр или свойство ведь уменьшают его на телефоне, причем в любом положении телефона. А у меня нет.

---

sergey loza,

Сделайте вот так:

@media screen and (min-width: 240px) and (max-width: 650px) { 
.klopanul_sagopevkad p,.eText p {font-size: 13px!important;}
}

---

Это условие уменьшает шрифт текста только в вертикальном положении телефона, а в горизонтальном положении шрифт так и остаётся большим. Вот в чем проблема.

---

sergey loza,

после переворота обновляйте страницу и проверяйте результат

---

Да я уже и обновлял, и историю посещений в браузере удалял - толку 0.

---

sergey loza,

Тогда стилями это никак не исправить если не пробовать ширину в условии media увеличивать.

---

Спасибо, проблему вроде бы решил. Вместо max-width в медиа прописал max-height.