# iOS 13 이전의 VisualViewport API
**URL:** https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448
**Category:** UX
**Created:** [11월 6, 2020, 3:40오후 UTC](https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448 "2020-11-06T15:40:52Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@woutervermeersch](https://meta.discourse.org/u/woutervermeersch)
#### Post date: [11월 6, 2020, 3:40오후 UTC](https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448/1 "2020-11-06T15:40:52Z")
안녕하세요,
Discourse가 iOS에서 가상 키보드의 최상단 위치를 어떻게 계산하는지 확인했습니다.
지금 제가 입력하고 있는 이 입력 필드처럼 가상 키보드 바로 위에 무언가를 위치시키고자 할 때 이는 매우 중요합니다.
안드로이드 브라우저 기기의 경우 이 문제는 발생하지 않습니다. position fixed 요소는 가상 키보드가 표시될 때 자동으로 키보드 바로 위까지 밀려 올라가거든요.
iOS에 대한 우회책은 visualviewport API를 사용하는 것입니다: [https://developer.mozilla.org/en-US/docs/Web/API/Visual\_Viewport\_API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API)
유일한 문제는 iOS 13 이전 기기에 대한 지원이 없다는 점입니다…
저는 iOS 12.1을 사용하는 기기에서 동일한 입력 필드를 테스트해 보았는데, Discourse는 지원되지 않는 iOS Safari 버전에서도 원하는 동작을 재현하는 데 성공한 것으로 보입니다.
동일한 결과를 얻기 위해 어디를 봐야 하는지 방향을 알려 주실 수 있나요? 정말 감사하겠습니다. 😃
감사합니다,
Wouter Vermeersch
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [11월 6, 2020, 6:17오후 UTC](https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448/2 "2020-11-06T18:17:44Z")
@sam이 "해킹의 산"이라고 불렀던 걸로 기억하는데, 정말로 거기에 발을 들이고 싶은 건지 잘 모르겠네요..
---
### Author:  [@woutervermeersch](https://meta.discourse.org/u/woutervermeersch)
#### Post date: [11월 6, 2020, 7:10오후 UTC](https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448/3 "2020-11-06T19:10:21Z")
해킹의 산이겠구나 싶다. 이 문제로 며칠째 머리를 싸매고 있으니, 그 산을 기꺼이 오를 준비가 되어 있다 😀 ..
이미 모바일 사파리가 입력 필드에 포커스가 맞춰질 때 상단 고정 바가 위로 올라가는 것을 막기 위해 엉성한 해킹을 하나 넣어야 했다. 사실 그걸 위해 했던 것보다 훨씬 나쁘지는 않을 것 같아 😝
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [11월 9, 2020, 2:16오전 UTC](https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448/4 "2020-11-09T02:16:14Z")
끔찍한 해킹 기법은 textarea가 포커스를 얻었을 때 position: fixed로 고정된 요소를 원래 위치에서 떼어내고, 페이지의 모든 요소를 숨기는 것이었다. 그런 다음 textarea가 포커스를 잃으면 다시 복원하는 방식이었다.
정말 특이한 방식이었다. @pmusaraj가 훨씬 더 견고한 구현을 도입해줘서 정말 기쁘다.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [11월 9, 2020, 3:27오후 UTC](https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448/5 "2020-11-09T15:27:46Z")
> [@woutervermeersch](#):
>
> 같은 결과를 얻기 위해 올바른 방향으로 안내해 주실 수 있나요? 정말 감사하겠습니다 😃
두 솔루션 모두에 관련된 코드는 여기에 있습니다: [https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/safari-hacks.js](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/safari-hacks.js)
다만 해당 파일에 언급된 바와 같이, 곧 iOS 12용 해킹 코드를 제거할 예정입니다. iOS 14가 올해 출시되었고, 여전히 iOS 12를 사용하는 기기는 약 5%에 불과합니다.
---
### Author:  [@woutervermeersch](https://meta.discourse.org/u/woutervermeersch)
#### Post date: [11월 9, 2020, 5:42오후 UTC](https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448/6 "2020-11-09T17:42:48Z")
공유해 주셔서 감사합니다! 😃
귀하의 우회 방법을 잠시 살펴봤는데, 모든 가능한 키보드 크기의 크기를 하드코딩하는 방향으로 진행하신 것 같습니다?
자동 제안이 비활성화되면 키보드 크기가 변경되는데, 그 부분은 어떻게 처리하나요?
iOS 12를 사용하는 사용자가 그렇게 적다는 것을 몰랐습니다. iOS 12 이하가 5%만 남았다는 것에 확신이 있으신가요? 그렇다면 그 특정 문제에 집중하는 것은 시간 낭비일 수 있습니다.
---
### Author:  [@Woutery1](https://meta.discourse.org/u/Woutery1)
#### Post date: [11월 9, 2020, 5:59오후 UTC](https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448/7 "2020-11-09T17:59:39Z")
iOS 2.14가 설치된 iPhone 6에서 확인해 보았습니다.
자동 제안(autosuggest)이 활성화된 경우 워크어라운드가 완벽하게 작동합니다… 자동 제안이 비활성화되면 여전히 간격이 남지만… 이미 말씀하신 대로 여전히 iOS 12에 머무는 사용자 수는 매우 적습니다… 자동 제안이 비활성화된 상태에서 iOS 12에 머무는 사용자는 그보다 훨씬 더 적을 것입니다.
따라서 당신의 수정안이 제가 상상할 수 있는 가장 좋은 해결책입니다. 공유해 주셔서 감사합니다! 😉
---
### Author:  [@Woutery1](https://meta.discourse.org/u/Woutery1)
#### Post date: [11월 9, 2020, 6:00오후 UTC](https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448/8 "2020-11-09T18:00:12Z")
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [11월 9, 2020, 6:15오후 UTC](https://meta.discourse.org/t/visualviewport-api-below-ios-13/169448/9 "2020-11-09T18:15:47Z")
> [@woutervermeersch](#):
>
> iOS 12 이하 버전에 남은 비율이 정말로 5%뿐이라는 것에 대해 확신하십니까? 그렇다면 해당 특정 문제에 집중하는 것이 시간 낭비가 될 수 있습니다.
공식적인 수치가 있는지 확신할 수는 없지만, Mixpanel의 [이 차트](https://mixpanel.com/trends/#report/ios_14/)에 따르면 iOS 12 및 이전 버전의 비율은 7%입니다.
iOS 12에 대한 수정 작업에 노력을 기울이는 것은 가치가 없다고 저도 강하게 동의합니다.