개발자
프론트엔드, ios: safari 사용 시 문제
safari 키보드 활성화가 되었을 때, 웹 페이지 크기가 설정한 크기보다 크게 나타납니다.
답변 2
viewport 메타데이터를 설정해보시는 건 어떤가요? user-scalable이 관련 주요 속성일 것 같습니다.
1<Head>
2 <meta
3 name="viewport"
4 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
5 />
6 </Head>익명
작성자
2023년 07월 20일
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 현재 설정되어 있음에도 같은 문제가 나타납니다. 키보드가 나타나면 상단에 position:fixed or sticky로 설정된 요소를 무시하고 focus된 text 위치로 스크롤을 상단에 고정합니다.(스크롤이 올라갑니다) 그리고 스크롤을 내리면 하단에 여백이 생깁니다(html, #root, body 밖에 빈 공간이 생깁니다)
안철진
소프트웨어 엔지니어 • 2023년 07월 21일
음 조금 이해하기 어려운데 실제 코드를 올려주실 수는 있나요?
Safari에서 키보드가 활성화되었을 때 웹 페이지 크기가 설정한 크기보다 크게 나타나는 문제는 일반적으로 모바일 기기에서 발생하는 현상입니다. 이는 키보드가 화면을 가리고 있어서 페이지가 스크롤되거나 조정되기 때문에 발생합니다. 해결을 위해 몇 가지 방법을 시도해 볼 수 있습니다: 1. 뷰포트(Viewport) 설정: HTML 문서의 `<head>` 태그 내에 뷰포트 설정을 추가하십시오. 뷰포트 설정은 페이지의 초기 화면 크기를 지정하고 레이아웃을 제어하는 데 도움을 줍니다. 예를 들어, 아래의 설정을 추가해보세요: 2. 스크롤 이벤트 감지: JavaScript를 사용하여 키보드 활성화 시 스크롤 이벤트를 감지하고 페이지 요소를 조정할 수 있습니다. 키보드가 활성화되면 페이지 내부 요소의 위치나 크기를 조정하여 키보드가 화면을 가리지 않도록 합니다. 3. CSS Flexbox 또는 Grid 사용: Flexbox나 Grid 레이아웃을 사용하여 페이지 요소를 유연하게 배치하고 화면 크기에 따라 자동으로 조정되도록 합니다. 4. iOS 전용 스크롤 이벤트 처리: iOS의 경우, `scroll` 이벤트가 스크롤 시작 후에만 발생하므로 `touchmove` 이벤트를 추가로 처리해야 할 수도 있습니다. iOS에서만 해당되는 문제이므로 해당 플랫폼에서만 이벤트를 처리하도록 구현합니다. 이러한 방법들을 시도해보면 Safari에서 키보드 활성화 시 웹 페이지 크기가 설정한 크기보다 크게 나타나는 문제를 해결할 수 있습니다.
1#1
2<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!