Есть ли такой способ, методом javascript, который бы мог получить значение из css, даже при условиях, когда браузер его не поддерживает. Проблема случилось в том, что вся вертска (практически) была выполнена на единицах измерениях vh, vw (но при адаптивности под телефоны, где Андроид 4.2 версии, это свойство не узнал.)
3 ответа
Использование полифиллов.
Ссылка на скачивание 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>
Чтобы узнать значение (размер шрифта, ширину, высоту и т.д.) обратился к css свойству данного элемента через jQuery
var qwe = $('h1').css('fontSize');
предварительно установил размер шрифта h1 = 2vh
в результате полученное значение равнялось 18.76px
пример прилагается: http://plnkr.co/edit/OXGknkfNkyo3AeVJz7cR?p=preview
-
1Это все хорошо, но в этом и проблема, если браузер не поддерживает значение он удаляет его , либо обозначает его как 0px– Node_pro4 янв 2016 в 18:11
-
Использование полифиллов является решением. ссылка на github github.com/rodneyrehm/viewport-units-buggyfill . Там есть демо и ссылка на подробное описание. Вот ссылка на примеры, чтобы сразу посмотрели w3.org/TR/css3-values/#viewport-relative-lengths– ghost4 янв 2016 в 19:09
Нет стандартного метода, позволяющего сделать такое.
Вам придется получать определения встроенных стилей(вытаскивая textContent
из $('style')
'ов) и/или файлов стилей(банальным $.get()
), после чего производить их парсинг.
Парсер вы можете напистать самостоятельно с нуля, либо использовать готовые библиотеки, например npm-пакет css
через browserify