Vh и vw, когда начальный масштаб окна просмотра не равен 1

Я ищу оверлей, чтобы занять весь экран.

width: 100vw;
height: 100vh;

Сайт, над которым я работаю, не отвечает и имеет ширину 1000 пикселей. У меня есть мета:

<meta name="viewport" content="width=device-width" />

установлен для загрузки сайта, чтобы он отображался шириной 1000 пикселей, но использовал область просмотра устройства в качестве единицы vh/vw, чтобы я мог использовать медиа-запросы и javascript для удаления/инициализации/не инициализации определенных функций.

Проблема в том, что 100vh соответствует области просмотра, когда соотношение пикселей равно 1:1 и не уменьшено, поэтому мои 100vh/vw намного меньше, чем физическая область просмотра.

Есть ли способ заполнить окно просмотра независимо от масштаба/уровня масштабирования, сохраняя при этом способность обнаруживать меньшие экраны?

Как указал @Benjamin Solum, я должен добавить, что проблема возникает в мобильных браузерах.

введите здесь описание изображения


css meta viewport viewport-units
person emachine    schedule 02.09.2015    source источник
comment
Я не слышал об этом, поэтому я попробовал его в codepen, и, похоже, он работал нормально (Chrome). В каком браузере вы масштабируете и как вы масштабируете? Просто увеличить размер текста или масштабировать все? Вы пробовали %?   -  person Benjamin Solum    schedule 02.09.2015
comment
Практически любой мобильный браузер   -  person emachine    schedule 02.09.2015
comment
Аааа, я думал с точки зрения рабочего стола. Сможете ли вы настроить Codepen/JSFiddle/etc. где вы можете воспроизвести проблему, с которой я столкнулся на своем телефоне? Просто хочу убедиться, что я правильно понял ваш вопрос. Кроме того, просто чтобы попробовать, решит ли <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> проблему?   -  person Benjamin Solum    schedule 03.09.2015
comment
Приносим извинения за задержку: начальный масштаб увеличивает масштаб в браузере, поэтому вы видите только угол, а минимальный масштаб не позволяет уменьшать масштаб. Вот скрипт: jsfiddle.net/n0rrmc9e/1 Вот облегченная версия для просмотра на вашем телефоне: fiddle.jshell.net/n0rrmc9e/1/show/light   -  person emachine    schedule 03.09.2015
comment
Да, я не был уверен, что предотвращение уменьшения масштаба решит вашу конкретную проблему. Выстрел в темноте :). Итак, кроме установки margin: 0; на теле, чтобы удалить белую рамку в левом верхнем углу, красный квадрат покрывает весь экран независимо от того, увеличиваю я или уменьшаю масштаб на своем телефоне Android (Примечание 4). Основываясь на вашем CSS, я ожидал этого. Что именно происходит в скрипке, что не работает на вашем устройстве?   -  person Benjamin Solum    schedule 03.09.2015
comment
Обновлен скриншотом с моего Note 3. Такой же результат я видел и на iPhone 6. Странно, что у вас аналогичный аппарат. Не совсем уверен, что с этим делать.   -  person emachine    schedule 03.09.2015
comment
Хм, я только что сбросил свой кеш и обновил его, и теперь мой пример работает, как задумано. Сайт, над которым я работаю, неверен, но пример работает так, как задумано. Я посмотрю еще раз и посмотрю, смогу ли я воспроизвести это.   -  person emachine    schedule 03.09.2015
comment
Интересно, что возвращение на сайт заставило меня увидеть его как ваш скриншот. Поиграем с ним еще немного.   -  person Benjamin Solum    schedule 03.09.2015
comment
Назовите меня сумасшедшим, но когда я изначально связал ссылку /show/light/, она просто показывала мою примерную страницу, но теперь она показывает оболочку jfiddle с iframe моих результатов.   -  person emachine    schedule 03.09.2015
comment
Я скопировал скрипку в ручку: codepen.io/soluml/pen/rOaWEK, просто чтобы быть Конечно. Установив top: 0; right: 0; bottom: 0; left: 0; вместо width: 100vw и height: 100vh;, я смог последовательно добиться эффекта, которого вы добиваетесь в моем Note 4. Я также установил margin: 0 для элемента body, чтобы удалить это дополнительное дополнение. В основном это ответ bjb568, но в этом случае я бы выбрал position: fixed вместо position: absolute.   -  person Benjamin Solum    schedule 03.09.2015
comment
Ответ @ bjb568 работает. Честно говоря, я мог бы поклясться, что пробовал это безуспешно, потому что я делаю это довольно часто, но когда я добавил его только сейчас, это сработало.   -  person emachine    schedule 03.09.2015

Ответы (2)


arrow_upward
-3
arrow_downward

Чтобы покрыть весь экран, используйте абсолютное позиционирование:

.overlay {
  /* For visibility */
  background: #f00;
  /* Position absolutely relative to viewport */
  position: absolute;
  /* Set edges to go all the way out to the viewport */
  top: 0; right: 0; bottom: 0; left: 0;
}
<div class="overlay">Hi!</div>

Таким образом, вам не нужно возиться с метаданными окна просмотра или чем-то подобным.

Как сказал Бенджамин Солум, вы можете сделать его фиксированным, если хотите, чтобы он оставался в одном и том же положении независимо от прокрутки.

person bjb568    schedule 03.09.2015
comment
Это работает для меня, хотя я бы заменил position: absolute на position: fixed. Я считаю, что эффект, к которому стремится автор, заключается в том, чтобы позиционировать его относительно области просмотра экрана, и они, вероятно, не хотят, чтобы он прокручивался. - person Benjamin Solum; 03.09.2015
comment
Единственным недостатком является то, что я размещаю элемент карты Google с кнопкой закрытия под ним. В крайнем случае, когда пользователь использует пространство под картой для увеличения, оставляя на экране только карту, у него нет возможности выйти, поскольку увеличение карты увеличивает только карту, а не область просмотра. Хотя я могу жить с этим. Спасибо за ответ. - person emachine; 03.09.2015

arrow_upward
0
arrow_downward

То, что ширина и высота области просмотра не корректируются после масштабирования, скорее является темой реализации браузера.

В отличие от свойств ширины и высоты, которые кажутся более связанными с самими элементами DOM, я считаю, что реализация vw и vh в браузере должна быть изменена.

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

person marvhock    schedule 26.07.2016