Vuejs : 모바일 브라우저에서 100vh

Question

나는 min-height: 100vh 과 함께 페이지를 가지고 있으며 모바일 브라우저에서 일부 오버플로가 렌더링됩니다. 그리고이 스크립트를 사용하여 수정했습니다 :

methods: { 
    calcVH() { 
     const vH = Math.max(document.documentElement.clientHeight, window.innerHeight, window.screen.height || 0) 
     document.getElementById('app').style.height = vH + 'px'; 
    } 
    }, 
    mounted() { 
    this.calcVH(); 
    window.addEventListener('onorientationchange', this.calcVH, true); 
    window.addEventListener('resize', this.calcVH, true); 
    } 

에뮬레이터에서는 정상적으로 작동하지만 크롬/사파리 모바일에서는 작동하지 않습니다. 누구나 동일한 문제가 있습니까?

Answer 1

예, 비슷한 문제가 있었는데 vh을 사용했습니다. known problem입니다.

제게 이런 종류의 해킹을 피하기 위해 휴대 전화와 태블릿에서 vh의 사용을 중단하는 것이 좋습니다. 대신 고전적인 상대 % (백분율) 값을 사용하십시오. vh을 %으로 바꿨으므로 저는 모바일에 그런 문제가 없지만 조금 더 많은 구현 노력이 필요합니다. %을 사용하면 모든 경우에 직설적이지는 않지만 똑같은 예측 가능한 방식으로 모든 곳에서 효과가있는 솔루션을 얻었으므로 다시 지불하게됩니다.