Задать вопрос
K_DOT
@K_DOT
DevOps инженер
html

Почему мобильные браузеры сжимают текст внутри блока?

Здравствуйте. Дело в том, что сайт некорректно отображается на мобильных устройствах с маленьким экраном. Текст в левом блоке сжимается (но блок не меняет своих размеров).
Это скриншот, сделанный с семидюймового планшета (все отображается нормально).
8ea19c97b6794ac4976a99efdeb13895.png
А это - с четырех дюймового смарта(текст сжимается)
ff058824feb34e048c7114cd9c4869e1.png
Если я правильно понимаю, это особенность мобильных браузеров. Браузер сжимает текст до той ширины, которая вмещается в окно без прокрутки, но можно ли отключить эту особенность для конкретного сайта или каким-нибудь другим способом исправить отображение?
Исходники(обновил)
  • Вопрос задан
  • 3976 просмотров
Комментировать
Подписаться 7 Оценить Комментировать
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Вы ничего не сможете с этим поделать. Называется это auto-fit, в настройках браузера андроид отключается. На русском "Автоподгонка страницы".
Это не баг, это фича. Вы конечно можете поискать в сети по запросам disable auto fit html и прочее, но часто там встречаются статьи большой давности, которые используют хаки, которые уже не работают.
В любом случае, ключевое здесь - используются хаки. Пользователю это может не понравится. У меня, к примеру, данная возможность в настройках отключена, а кому-то она нужна. Раньше, когда я с трубы читал новости, то она была включена. Мне было плевать, что едет верстка, потому что заставлять пользователя пользоваться горизонтальным скроллом - это кощунство.
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 3
Alexanevsky
@Alexanevsky
Любительская web-разработка
Попробуйте вставить в head
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Успехов!
Ответ написан
1 комментарий
1 комментарий
hitakiri
@hitakiri
Доброго времени.
В хедер: 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

вставьте в css стили:
.flatblock-content{
display: inline;
width: 100%;
clear:bouth;
//на всякий случай 
letter-spacing: normal;
text-rendering: auto;
word-spacing: normal;
}
Ответ написан
8 комментариев
8 комментариев
@whats
Когда же вы наконец научитесь скидывать пример верстки или давать ссылки на исходники ?

А по скринам видно что у тебя не текст сжался а сам блок в котором текст находится
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
NodeJS реализации интерации двух сервисов и создания микро системы
28 апр. 2024, в 13:39
11000 руб./за проект
Разработка веб-игры
28 апр. 2024, в 13:37
15000 руб./за проект
Разработка Telegrm-бота с WebApp
28 апр. 2024, в 13:15
80000 руб./за проект
Ещё заказы