모바일 Safari에서 스크롤할 때 주소 표시줄/URL 표시줄이 변경되지 않은 상태로 유지됩니다.

Question

React(16.8.6)를 사용하여 웹사이트를 구축하고 있는데, 모바일 Safari에서는 사용자가 스크롤을 시작할 때 다른 웹사이트처럼 URL 표시줄이 접히거나 줄어들지 않습니다.

래핑 div에 대한 CSS는 다음과 같습니다.

<ContentContainer>
    <ScrollContainer>
        {...otherComponents여기}
    <ScrollContainer/>
<ContentContainer/>

const ContentContainer = styled.div`
  height: 100%; /*두 열이 브라우저 창의 전체 높이를 차지하도록 허용합니다*/
  오버플로-y: 자동;
  플렉스 성장: 1;
  디스플레이: 플렉스;
  플렉스 방향: 열;
`;
const ScrollContainer = styled.div`
  플렉스: 1;
`;

App.css는 다음과 같습니다:

html {
  높이: 100%;
  최소 높이: 100vh;
}

몸 {
  글꼴 모음: 'Work Sans', 'Courier New', sans-serif;
  최소 높이: 100%;
  높이: 100%;
  여백: 0px;
}
#앱 {
  높이: 100%;
}

#루트 {
  높이: 100%;
  디스플레이: 플렉스;
  overflow: 숨김; /*본문을 스크롤할 수 없게 만듭니다*/
  상자 크기 조정: 테두리 상자;
}

사용자가 스크롤할 때 Safari URL 표시줄이 접히는 것을 방지하는 CSS의 문제를 찾으려고 노력 중입니다. 도움을 주셔서 감사합니다.

Answer 1

모바일 Safari에서 URL 표시줄을 축소/축소하려면 body溢出视口，但这里并非如此：您的body不可滚动，而且您的ContentContainer이 뷰포트 내에 완전히 있어야 합니다.

이를 테스트하려면 CSS 없이 새 페이지를 만들고 페이지를 스크롤할 수 있도록 body에 충분한 콘텐츠를 넣으세요.