Я использую 100vh для центрирования div по вертикали с высотой линии. Этот сайт поддерживает поддержку vh и vw около 70%, это справедливая оценка? Можете ли вы рекомендовать использовать единицы просмотра в процессе создания сайта? Я знаю, что это немного субъективно, я просто ищу мнения от более опытных веб-разработчиков, чем я.
EDIT: Спасибо за вход всем, я хочу, чтобы он хорошо смотрелся на мобильном телефоне, поэтому я думаю, мне придется отказаться от vh.
Статистика ясна, и это, на мой взгляд, справедливая оценка.
Я думаю, что решение должно быть принято вами. Если вы хотите, чтобы ваш веб-сайт, надеясь на будущее, использовал самую последнюю самую лучшую технологию, но понимаете, что в настоящее время есть некоторые недостатки, а затем здорово, идите на это.
Если вы не готовы вкладывать немного больше в свое присутствие в Интернете, придерживайтесь старого способа, который ни в коем случае не является неправильным.
EDIT: Когда я хочу создать отзывчивый дизайн, я начинаю сначала разрабатывать Mobile Devices, а затем создавать Desktop Version, чтобы убедиться, что мои видовые экраны работают правильно, поскольку в некоторых случаях поддержка Mobile не хватает (особенно vmax). НО об этом вы могли бы спросить 50 парней, и шансы, что все они скажут что-то еще, очень хороши.
используйте CSS vh и jQuery, это безопаснее.
Пример jQuery:
var clientHeight = $( window ).height();
$('.element').css('height', clientHeight);
и CSS:
.element {height: 100vh;}
Единицы Viewport великолепны, но большинству поставщиков мобильных браузеров удалось сделать vh непригодным на практике.
Когда вы начинаете прокрутку или изменяете направление прокрутки, адресная строка либо исчезнет, либо вернется; затем вы остановите, отпустите палец, и значение vh будет внезапно обновляться вместе с любым элементом, использующим его, что приведет к кошмару UX (пользователь не ожидает изменения размера в конце прокрутки, изменения пропорций существующих элементов, повторной компоновки содержимое и т.д.).
На самом деле вы ссылаетесь на на свой вопрос.
Это зависит от того, какие браузеры вам нужно поддерживать.
Частичная поддержка в IE9 относится к поддержке "vm" вместо "vmin". Частичная поддержка в iOS7 обусловлена ошибкой поведения модуля vh. Вся другая частичная поддержка относится к тому, что не поддерживается блок "vmax".
Это означает, что использование единиц видового экрана может быть "ошибкой" в iOS7. Я бы не рекомендовал использовать единицы просмотра, но вместо этого используйте:
height: 500px;height: 50%;Эти значения широко поддерживаются и будут давать наилучшие результаты.
Ну, вы можете увидеть его уже там для настольных браузеров, а поддержка на мобильных устройствах довольно ограничена. Это зависит от того, хотите ли вы создать сайт, который хорошо выглядит на компьютерах, или более совместимый сайт на основе пикселей, который также работает на телефонах.