как реализовать модуль размера шрифта vh и vw для адаптивного шрифта для старых браузеров Android?

Похоже, что старые браузеры Android не поддерживают размер шрифта vh и vw в css. Есть ли способ использовать vw и vh или любой другой способ сделать шрифты отзывчивыми в старых браузерах Android? У меня много текста с разными размерами шрифта, и я не хочу использовать медиа-запрос.


person interstellarDust    schedule 01.04.2014    source источник


Ответы (1)


Вы можете сделать это с помощью jquery. Есть 3 шага, чтобы сделать шрифты отзывчивыми.

  1. Настройте шрифты для фиксированного размера. Например, 800px.
  2. Используйте имя класса в любом элементе dom, где вы хотите сделать шрифт адаптивным. Например, class="rf" (адаптивный шрифт).
  3. Используйте приведенный ниже код 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
comment
ну это было сложно. это будет работать, но я думаю, что есть некоторая проблема с производительностью, потому что это загрузит всю страницу, а затем будет перебирать весь класс, после чего изменится шрифт. и если я хочу изменить ориентацию устройства, я должен сделать это при изменении ориентации. есть ли более быстрый способ? - person interstellarDust; 21.04.2014
comment
Установите размер шрифта для основного элемента (по умолчанию 16 пикселей), установите все остальные размеры шрифта в процентах (например, 24 пикселя становится 150%), затем запустите скрипт, проверяющий ширину экрана и корректирующий размер основного шрифта; все остальные размеры шрифта будут изменены автоматически. См. мой вопрос и обходной путь, который я опубликовал в аналогичной ситуации: затронутый" title="размер шрифта блока просмотра и ошибка масштабирования, на которые влияют браузеры"> stackoverflow.com/questions/30280345/ - person m69 ''snarky and unwelcoming''; 14.06.2015