0

Есть ли такой способ, методом javascript, который бы мог получить значение из css, даже при условиях, когда браузер его не поддерживает. Проблема случилось в том, что вся вертска (практически) была выполнена на единицах измерениях vh, vw (но при адаптивности под телефоны, где Андроид 4.2 версии, это свойство не узнал.)

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 5 янв 2016 в 0:47

3 ответа 3

1

Использование полифиллов.

Ссылка на скачивание https://github.com/rodneyrehm/viewport-units-buggyfill В архиве нам нужен файл "viewport-units-buggyfill.js". Копируем его к себе в папку с другими js файлами. Подключаем его в нашем html или php файле и инициализируем следующим кодом:

<script>
    window.viewportUnitsBuggyfill.init({
        force: true,
        refreshDebounceWait: 250,
        hacks: window.viewportUnitsBuggyfillHacks
    });
</script>

В результате все vw и vh будут пересчитаны в px.

onResize - будет пересчёт.

Проверено.

Тестировал с помощью 1 html файла, его код ниже:

<!DOCTYPE html>
<html>
    <head>
        <title>полифиллы</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            head {
                display: block
            }
            #patched-viewport {
                display: block;
                padding: 10px;
            }
        </style>
        /*установил ширину 90vw*/
        <style media="(max-width: 320px)">
            body { 
                width: 90vw; 
            }
        </style>
        /*установил ширину 70vh*/
        <style media="(min-width: 480px)">
            body { 
                width: 70vh;
            }
        </style>
    </head>
    <body>
        <!--Подключил скрипт-->
        <script src="viewport-units-buggyfill.js"></script>

        <!--Инициализировал скрипт-->
        <script>
            window.viewportUnitsBuggyfill.init({
                force: true,
                refreshDebounceWait: 250,
                hacks: window.viewportUnitsBuggyfillHacks
            });
        </script>
     </body>
</html>
0

Чтобы узнать значение (размер шрифта, ширину, высоту и т.д.) обратился к css свойству данного элемента через jQuery

var qwe = $('h1').css('fontSize');

предварительно установил размер шрифта h1 = 2vh

в результате полученное значение равнялось 18.76px

пример прилагается: http://plnkr.co/edit/OXGknkfNkyo3AeVJz7cR?p=preview

2
  • 1
    Это все хорошо, но в этом и проблема, если браузер не поддерживает значение он удаляет его , либо обозначает его как 0px
    – Node_pro
    4 янв 2016 в 18:11
  • Использование полифиллов является решением. ссылка на github github.com/rodneyrehm/viewport-units-buggyfill . Там есть демо и ссылка на подробное описание. Вот ссылка на примеры, чтобы сразу посмотрели w3.org/TR/css3-values/#viewport-relative-lengths
    – ghost
    4 янв 2016 в 19:09
0

Нет стандартного метода, позволяющего сделать такое.

Вам придется получать определения встроенных стилей(вытаскивая textContent из $('style')'ов) и/или файлов стилей(банальным $.get()), после чего производить их парсинг.

Парсер вы можете напистать самостоятельно с нуля, либо использовать готовые библиотеки, например npm-пакет css через browserify

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.