나는 최대 높이를 100 %로 설정하고 모든 내용을 스크롤 할 필요없이 반응하는 웹 사이트를 작성하려고합니다. {height: 100vh} 설정은 바탕 화면의 플렉스 박스에서 작동합니다. 그러나 모바일에서 사이트를 볼 때 크롬에서 브라우저 탭의 높이를 무시하고 스크롤합니다. 높이를 설정하여 {height: calc(100vh - address bar)}과 같이 문서의 높이를 줄이면 브라우저 탭을 스크롤하거나 숨기지 않고도 모든 것이 잘 맞습니다.css - Android 브라우저 막대의 높이를 계산 하시겠습니까?
웹 페이지 헤드에 뷰포트 메타 태그를 포함 시켰습니까? 경험을 통해 특정 CSS가 모바일 버전에 미치는 영향을 변경할 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
즉, 운동 아마도 미디어 쿼리를 사용하고 100% 대신 100vh를 사용하지 않습니다 있다면.
어떻게 작동하는지 알지 못하거나 설명하지 못하기 때문에 이것을 "대답"이라고 부르기 란 어렵습니다. "시도해보십시오, 아마도 그것에 대해 생각해보십시오."일종의 설명은 해답이 아니라 논평이어야합니다. 아직 코멘트 할 담당자가 충분하지 않은 경우 그 이유가 있습니다. – csmckelvey
이것은 작동하지 않았으며'%'vs'vh'는 장치의 화면 크기를 채우지 않습니다. – cellsheet
나는 비슷한 것을 시도하고 있습니다 : https://stackoverflow.com/questions/42892105/flex-box-100vh-stretches-behind-mobile-safari-chrome-are-there-any-known- 트릭 – sheriffderek