VUEJS) 모바일화면에 맞게 vh지정하는 방법, vh가 맞지 않는 이유

1. 개발자모드에서는 잘되는데 실제 모바일에서는 아래가 짤리는 현상이 발생

 

 

CSS 사용자 정의 속성: 크기 조정을 위한 트릭

CSS 사용자 정의 속성과 몇 줄은 JavaScript내가 필요로 하는 일관되고 정확한 크기를 얻는 완벽한 방법일 수 있다는 생각이 들었습니다 .

JavaScript에서는 전역 변수를 사용하여 항상 현재 뷰포트의 값을 얻을 수 있습니다. window.innerHeight. 이 값은 브라우저의 인터페이스를 고려하며 가시성이 변경되면 업데이트됩니다. 트릭은 뷰포트 값을 CSS 변수에 저장하고 이를 요소에 적용하는 것입니다.대신에 의 vh 단위.

CSS 사용자 정의 변수가 --vh이 예를 위한 것이라고 가정해 보겠습니다 . 즉, 다음과 같이 CSS에 적용하려는 것입니다.

.my-element { height: 100vh; /* Fallback for browsers that do not support Custom Properties */

height: calc(var(--vh, 1vh) * 100); }

좋아, 우리를 설정합니다. 이제 JavaScript에서 뷰포트의 내부 높이를 구해 보겠습니다.

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit let vh = window.innerHeight * 0.01; // Then we set the value in the --vh custom property to the root of the document document.documentElement.style.setProperty('--vh', `${vh}px`);

JavaScript에 뷰포트 높이를 가져오도록 지시한 다음 해당 합계의 1/100로 드릴다운하여 뷰포트 높이 단위 값으로 할당할 값을 갖습니다. 그런 다음 JS 에 정중하게 CSS 변수( --vh)를 :root.

결과적으로 이제 --vh다른 vh단위 와 마찬가지로 높이 값으로 사용할 수 있습니다. 여기에 100을 곱하면 원하는 전체 높이가 됩니다.

 

최근에 나온 또 다른 수정 사항이 있습니다. Matt Smith가 여기에 문서화합니다 . 트릭은 iOS 장치에서 작동해야 min-height: -webkit-fill-available;하는 에 대한 점진적인 향상으로 본체 100vh에 있습니다.

와, 거기! 하나 더 작은 세부 사항.

이 시점에서 작업이 완료된 것처럼 보일 수 있지만 세부 사항에 대한 기민한 눈을 가진 사람들은 JavaScript가 실행되지만 뷰포트의 높이가 변경될 때 요소의 크기를 업데이트하지 않는다는 것을 눈치채셨을 것입니다. 계속해서 위의 데모 크기를 조정해 보십시오.

--vh창 resize이벤트를 수신하여 의 값을 업데이트할 수 있습니다 . 이것은 사용자가 가로에서 세로로 기기 화면을 회전하거나 스크롤 시 탐색이 시야에서 벗어나는 경우에 유용합니다.

// We listen to the resize event window.addEventListener('resize', () => { // We execute the same script as before let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); });

⚠️ 값을 업데이트하면 --vh페이지가 다시 그려지고 결과적으로 사용자가 점프를 경험할 수 있습니다. 이 때문에 이 트릭을 모든 프로젝트에 사용하거나 vh 단위의 모든 사용을 대체해야 한다고 조언하는 것이 아니라 사용자에게 정확한 뷰포트 단위 값이 필요한 경우에만 사용해야 합니다.

또한 사용자가 브라우저 창의 크기를 조정하는 동안 많은 이벤트가 트리거되지 않도록 크기 조정 이벤트에 대한 디바운스 메서드를 구현할 수 있습니다. 이 문서에서 이에 대해 자세히 알아볼 수 있습니다. 예를 통해 설명된 디바운싱 및 조절

 

이제 위의 데모 크기를 조정할 수 있으며 CSS 변수가 그에 따라 업데이트되는 것을 확인할 수 있습니다.

최근에 프로젝트에서 이 기술을 사용했고 정말 도움이 되었지만 브라우저의 기본 동작을 바꿀 때는 항상 두 번 생각해야 합니다. (예를 들어, 이 많이 올라옵니다 과를 ::focus.) 또한, 브라우저는 요즘 매우 빠른 업데이트를하는 경향이, 그렇게하지 않을 수 있습니다 일 내일 오늘날의 솔루션을 조심.

 

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

The trick to viewport units on mobile