Похоже, что старые браузеры Android не поддерживают размер шрифта vh и vw в css. Есть ли способ использовать vw и vh или любой другой способ сделать шрифты отзывчивыми в старых браузерах Android? У меня много текста с разными размерами шрифта, и я не хочу использовать медиа-запрос.
как реализовать модуль размера шрифта vh и vw для адаптивного шрифта для старых браузеров Android?
Ответы (1)
Вы можете сделать это с помощью jquery. Есть 3 шага, чтобы сделать шрифты отзывчивыми.
- Настройте шрифты для фиксированного размера. Например, 800px.
- Используйте имя класса в любом элементе dom, где вы хотите сделать шрифт адаптивным. Например,
class="rf"
(адаптивный шрифт). - Используйте приведенный ниже код jquery, чтобы сделать шрифты отзывчивыми.
html код..
<div class="rf">this is sample text</div>
jquery-код..
$(function(){
var element = $('.rf');
element.each(function (i) {
fonts = $(this).css('font-size');
fonts = fonts.replace("px","");
windowWidth = $(window).width();
fontSize = fonts*windowWidth/800;
$(this).css('font-size',fontSize);
});
})
измените код в соответствии с именем вашего класса «rf» и с тем, что вы использовали для настройки размера шрифта «800».
person
BlackJack
schedule
21.04.2014
ну это было сложно. это будет работать, но я думаю, что есть некоторая проблема с производительностью, потому что это загрузит всю страницу, а затем будет перебирать весь класс, после чего изменится шрифт. и если я хочу изменить ориентацию устройства, я должен сделать это при изменении ориентации. есть ли более быстрый способ?
- person interstellarDust; 21.04.2014
Установите размер шрифта для основного элемента (по умолчанию 16 пикселей), установите все остальные размеры шрифта в процентах (например, 24 пикселя становится 150%), затем запустите скрипт, проверяющий ширину экрана и корректирующий размер основного шрифта; все остальные размеры шрифта будут изменены автоматически. См. мой вопрос и обходной путь, который я опубликовал в аналогичной ситуации: затронутый" title="размер шрифта блока просмотра и ошибка масштабирования, на которые влияют браузеры"> stackoverflow.com/questions/30280345/
- person m69 ''snarky and unwelcoming''; 14.06.2015