이와 관련하여 여러 가지 질문이 있다는 것을 알고 있지만, 이러한 질문을 받은 이후 브라우저 팀이 변경을 했기 때문에 그 중 어느 것도 더 이상 유효한 것 같지 않습니다. 나는 이 문제에 대한 최신 해결책을 찾으려고 노력하고 있습니다.
내 바람은 모바일 웹 브라우저를 사용할 때, 특히 사용자가 입력 필드에 초점을 맞추고 가상 키보드가 표시될 때 앱과 같은 경험을 위해 고정 헤더가 계속 상단에 유지되는 것입니다.
최근 Chrome 모바일 팀은 iOS의 Chrome 및 iOS의 모바일 Safari와 일관되게 모바일 웹 레이아웃과 시각적 표시 영역의 크기를 조정하는 방식을 변경했습니다.
David Fedor의 기사에 있는 이 GIF는 대부분의(전부는 아님) 모바일 브라우저의 현재 상태를 매우 간결하게 보여줍니다. 즉, 화면 키보드(OSK, 가상 키보드라고도 함)를 사용할 때 시각적 뷰포트가 "위로 이동"합니다. 초점이 있습니다.
제가 겪고 있는 가장 큰 문제는 OSK가 표시될 때 제목 요소를 시각적으로 상단에 유지할 수 없다는 것입니다. 상단 앱 바에 '저장' 형식의 기본 작업이 있는 경우 이는 큰 문제입니다. 이는 사용자 경험을 어수선하게 하고 고객이 좌절감을 느끼도록 하기 때문에 제 생각에는 작은 일이 아닙니다.
Chrome 팀에서 권장하는 VisualViewport API(env(keyboard-inset-height) 참조)를 사용해 보았으나 작동하지 않는 것 같아서 레이아웃에 ENV가 올바르게 설정되지 않은 등 이상한 일을 하고 있는 것 같습니다.
너무 이상할 것은 없습니다. CSS 그리드를 사용하여 레이아웃을 제어하세요.
HTML
으아악CSS 스타일
으아악내가 얻은 것은 다음 두 개의 스크린샷이었습니다. 전체 페이지 중 하나는 내가 원하는 레이아웃이고, 두 번째는 아래쪽 근처의 입력에 커서를 놓으면 전체 시각적 뷰포트가 위로 "밀어져" 제목이 위치를 벗어나게 됩니다. 화면.
| 전체 화면 | 입력 중심 |
|---|---|
현재 제목이 항상 시각적 뷰포트 위에 유지되도록 할 수 있는 방법이 있나요? 최근 Chrome 업데이트 이후 현재 작동하는 솔루션을 찾을 수 없습니다.
P粉5739437552024-03-28 11:21:21
Google Chrome 108 이상의 경우 <meta name="viewport" content="width=device-width, initial-scale=1.0, Interactive-widget=resizes-content">를 설정하세요.
viewport 元标记中的 interactive-widget 속성을 참고하세요.
해결책을 여기에서 찾았습니다.
Android용 Chrome 최신 버전을 확인했습니다.