CSS: Широко поддерживаются ли высота просмотра (vh) и ширина представления (vw)?

Question

Я использую 100vh для центрирования div по вертикали с высотой линии. This site поддерживает поддержку vh и vw около 70%, это справедливая оценка? Можете ли вы рекомендовать использовать единицы просмотра в процессе создания сайта? Я знаю, что это немного субъективно, я просто ищу мнения от более опытных веб-разработчиков, чем я.

EDIT: Спасибо за вход всем, я хочу, чтобы он хорошо выглядел на мобильных устройствах, поэтому я думаю, придется отказаться от vh.

Answer 1

Статистические данные ясно, и это справедливая оценка, на мой взгляд.

Я думаю, что решение должно быть принято вами. Если вы хотите в будущем убедиться в своем веб-сайте, используя новейшие технологии, но имейте в виду, что в настоящее время есть некоторые недостатки, а затем здорово, идите на это.

Если вы не готовы вкладывать немного больше в свое присутствие в Интернете, придерживайтесь старого пути, что ни в коем случае не так.

EDIT: Когда я хочу создать отзывчивый дизайн, я начинаю сначала разрабатывать Mobile Devices, а затем создавать Desktop Version, чтобы убедиться, что мои видовые экраны работают правильно, поскольку в некоторых случаях поддержка Mobile не хватает (особенно vmax) , НО об этом вы могли бы попросить 50 парней, и шансы, что все они скажут что-то еще, очень хороши.

Answer 2

Ну, вы можете видеть, что он уже существует для настольных браузеров, а поддержка на мобильных устройствах весьма ограничена. Поэтому на самом деле это зависит от того, хотите ли вы создать сайт, который хорошо выглядит на компьютерах, или более совместимый сайт на основе пикселей, который также работает на телефонах.

Answer 3

Адрес страницы, которую вы связали с answers your question.

Это зависит от того, какие браузеры вам нужны для поддержки.

Частичная поддержка в IE9 относится к поддержке «vm» вместо «vmin». Частичная поддержка в iOS7 обусловлена ​​ошибкой поведения модуля vh. Вся другая частичная поддержка относится к тому, чтобы не поддерживать блок «vmax».

Это означает, что использование единиц видового экрана может быть «ошибкой» в iOS7. Я бы не рекомендовал использовать единицы просмотра, но вместо этого использовал:

• Pixles: eg. height: 500px;
• Процент: напр. height: 50%;

Эти значения широко поддерживаются и будут давать наилучшие результаты.

Answer 4

использовать как CSS vh, так и jQuery, безопаснее.
JQuery пример:

var clientHeight = $(window).height(); 
    $('.element').css('height', clientHeight); 

и CSS:

.element {height: 100vh;} 

Answer 5

Viewport единиц велики, но большинство производителей мобильных браузеров удалось сделать vh непригодным для использования на практике.

Когда вы начинаете прокрутку или меняете направление прокрутки, адресная строка либо исчезнет, ​​либо вернется; то вы остановитесь, отпустите свой палец, и значение vh будет внезапно обновляться рядом с любым элементом, использующим его, что приведет к кошмару UX (пользователь не ожидает изменения размера в конце прокрутки, изменения пропорций существующих элементов, повторной компоновки содержимого, и т.д).