Текущая поддержка единиц измерения окна просмотра CSS

Я планирую создать сайт с прокруткой на одну страницу, используя несколько div с высотой и размером шрифта в единицах просмотра (vh, vw).

Мне известно о некоторых проблемах с поддержкой в ​​старых браузерах, но я не заинтересован в увеличении загрузки страницы с помощью vminpoly так как я нашел его громоздким, и я не без ума от поддержки очень устаревших браузеров.

С другой стороны, Buggyfill может быть меньшим, но частичным решением для кроссбраузерной совместимости.

Другим решением может быть тестирование поддержки, как написано в css-tricks, а затем использование jQuery для изменения размера. пораженные элементы:

var testEl = $("#vw-test");

testEl.css({
  width: "100vw"
});

if (testEl.width() == window.innerWidth) {
   // do nothing
} else {
   // resize divs with jQuery
};

Каким будет ваш подход к поддержке единиц просмотра?

Знаете ли вы другое простое решение для разумной совместимости браузера?


html jquery css viewport-units
person denoise    schedule 08.08.2014    source источник
comment
Buggyfill не заставляет эти модули работать в старых браузерах, он просто устраняет проблему в существующей реализации этих модулей в Safari Mobile. И если вы говорите, что не в восторге от поддержки устаревших браузеров, то текущая поддержка широка. достаточно, я бы сказал. (За исключением, может быть, Opera до Blink.)   -  person CBroe    schedule 08.08.2014

Ответы (2)


arrow_upward
0
arrow_downward

Для размера шрифта относительно окна просмотра попробуйте этот плагин: https://github.com/draashurx/viewportfontsize/tree/master

Простой и понятный пример использования:

$('p').vw(10); // Equals font-size: 10vw
$('p').vh(5);  // Equals font-size: 5vh

Однако этот плагин не поддерживает свойство width или height. В настоящее время это применимо только к собственности font-size.

person yqlim    schedule 14.11.2016

arrow_upward
-1
arrow_downward

Это похоже на вопрос, основанный на мнении, также не совсем понятно, что вы спрашиваете.

Что касается использования в font-size, я думаю, что лучший и единственный способ фактически использовать единицы области просмотра — это скрыть их за медиа-запросами минимальной высоты и длины, выраженными в em, чтобы гарантировать, что вы не получите отрицательное увеличение от этих областей просмотра. единицы измерения.

Вероятно, самое полезное и подходящее использование единиц окна просмотра, с точки зрения веб-доступности, было бы на простых одностраничных страницах с контактной информацией в стиле кредитной карты. (В противном случае, если вы будете использовать его в статьях с длинным текстом и т. д., вы рискуете испортить опыт людей, которые специально приобрели мониторы большего размера, чтобы иметь возможность одновременно видеть больше текста.)

Как правильно использовать css-values ​​viewport-relative -длины?

/* automatically magnify business-card-style page in large viewports */
/* please don't use this unless you yourself posses a large monitor! */
@media (min-width: 50em) and (min-height: 64em) {
  /* start with 100% at 50em, we'll have 200% magnification when at 100em */
  html {font-size: 2vmin;}
}
person cnst    schedule 12.05.2015