이 문제는 미디어 쿼리와 약간의 수학으로 해결할 수 있습니다. portait 오리엔테이션을위한 솔루션은 다음과 같습니다.

@media (max-device-aspect-ratio: 3/4) {
  height: calc(100vw * 1.333 - 9%);
}
@media (max-device-aspect-ratio: 2/3) {
  height: calc(100vw * 1.5 - 9%);
}
@media (max-device-aspect-ratio: 10/16) {
  height: calc(100vw * 1.6 - 9%);
}
@media (max-device-aspect-ratio: 9/16) {
  height: calc(100vw * 1.778 - 9%);
}

URL 표시 줄이 사라지면 vh가 변경되므로 다른 방법으로 높이를 결정해야합니다. 고맙게도 뷰포트의 너비는 일정하며 모바일 장치는 몇 가지 종횡비 만 제공됩니다. 너비와 종횡비를 결정할 수 있으면 약간의 수학으로 vh 가 작동 하는 것처럼 뷰포트 높이를 정확하게 얻을 수 있습니다. 과정은 다음과 같습니다

1) 타겟팅하려는 가로 세로 비율에 대한 일련의 미디어 쿼리를 만듭니다.

• URL 막대가 사라질 때 후자의 크기가 조정되므로 aspect-ratio 대신 device-aspect-ratio를 사용하십시오.

• 나는 가장 인기있는 사이에 발생하는 종횡비를 대상으로 장치 종횡비에 ‘max’를 추가했습니다. 정확하지는 않지만 소수의 사용자만을위한 것이며 여전히 적절한 vh에 가깝습니다.

• horizontal / vertical을 사용하여 미디어 쿼리를 기억하므로 portait의 경우 숫자를 뒤집어 야합니다.

2) 각 미디어 쿼리에 대해 가로 세로 비율의 역수로 요소의 수직 높이 백분율을 vw로 곱하십시오.

• 너비와 높이 대 너비의 비율을 알고 있으므로 원하는 % (경우에 100 %)에 높이 / 너비의 비율을 곱하면됩니다.

3) URL 막대 높이를 결정한 다음 높이에서 빼십시오. 정확한 측정 결과를 찾지 못했지만 가로 방향의 모바일 장치에는 9 %를 사용하며 상당히 잘 작동하는 것 같습니다.

이것은 매우 우아한 솔루션은 아니지만 다른 옵션은 다음과 같은 점을 고려할 때 좋지 않습니다.

• 웹 사이트가 사용자에게 버그가있는 것처럼 보이면

• 크기가 잘못된 요소가 있거나

• 기본 스타일링에 자바 스크립트를 사용하면

단점은 일부 장치는 가장 인기있는 것과 다른 URL 막대 높이 또는 종횡비를 가질 수 있다는 것입니다. 그러나 소수의 장치 만 몇 픽셀의 뺄셈을 겪을 경우이 방법을 사용하면 스 와이프 할 때 웹 사이트 크기를 조정하는 모든 사람보다 훨씬 좋습니다.

더 쉽게하기 위해 SASS 믹스 인도 만들었습니다.

@mixin vh-fix {
  @media (max-device-aspect-ratio: 3/4) {
    height: calc(100vw * 1.333 - 9%);
  }
  @media (max-device-aspect-ratio: 2/3) {
    height: calc(100vw * 1.5 - 9%);
  }
  @media (max-device-aspect-ratio: 10/16) {
    height: calc(100vw * 1.6 - 9%);
  }
  @media (max-device-aspect-ratio: 9/16) {
    height: calc(100vw * 1.778 - 9%);
  }
}

답변

$(function(){

  var $w = $(window),
      $background = $('#background');

  // Fix background image jump on mobile
  if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
    $background.css({'top': 'auto', 'bottom': 0});

    $w.resize(sizeBackground);
    sizeBackground();
  }

  function sizeBackground() {
     $background.height(screen.height);
  }
});

var background = document.getElementById('background');

// Fix background image jump on mobile
if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
  background.style.top = 'auto';
  background.style.bottom = 0;

  window.onresize = sizeBackground;
  sizeBackground();
}

function sizeBackground() {
  background.style.height = screen.height;
}

function greedyJumbotron() {
    var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome on tablet

    var jumbotron = $(this);
    var viewportHeight = $(window).height();

    $(window).resize(function () {
        if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) {
            viewportHeight = $(window).height();
            update();
        }
    });

    function update() {
        jumbotron.css('height', viewportHeight + 'px');
    }

    update();
}

$('.greedy-jumbotron').each(greedyJumbotron);