<div id="readability-page-1" class="page"><div><h2 id="caniuse-꼭-확인하기">CanIUse 꼭 확인하기</h2>
<p>반응형으로 화면이 줄어들더라도 비율을 유지하기 위해 <code>aspect-ratio</code>라는 속성을 사용했다.<br>
근데 IOS 14 에서 제대로 적용이 안되는 이슈가 있었다.</p>
<p>확인해보니 지원을 안하고있었다 제길..<br>
<img src="https://velog.velcdn.com/images/ginameee/post/36963ca4-bffe-4d6b-a40f-a99d2b43993e/image.png"></p>
<p>chatGPT에 물어보니 다행히 다른 방안이 있어 적용해두었다.<br>
<img src="https://velog.velcdn.com/images/ginameee/post/98e5834f-eac3-4dc0-bdde-5931cbfda6bf/image.png"></p>
<p>고마워요 chatGPT....</p>
<h2 id="visualviewport">visualViewport?</h2>
<p>아직 정확히 알아보진 않았지만,<br>
실제 화면에 보이는 viewport 만을 계산할 수 있는 API로 보인다.</p>
<p>최근 웹서비스를 만들면서 IOS, AOS의 크로스브라우징이슈에 아주 애를먹고있는데,,<br>
잘만 활용하면 좋을 것 같다.</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport">https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport</a></li>
<li><a href="https://stackoverflow.com/questions/39417778/iphone-safari-not-resizing-viewport-on-keyboard-open">https://stackoverflow.com/questions/39417778/iphone-safari-not-resizing-viewport-on-keyboard-open</a></li>
<li><a href="https://channel.io/ko/blog/cross_browsing_ios15">https://channel.io/ko/blog/cross_browsing_ios15</a></li>
</ul></div></div>

ginameee.log

Jangchun Lee

CanIUse 꼭 확인하기
반응형으로 화면이 줄어들더라도 비율을 유지하기 위해 aspect-ratio라는 속성을 사용했다.
근데 IOS 14 에서 제대로 적용이 안되는 이슈가 있었다.
확인해보니 지원을 안하고있었다 제길..
chatGPT에 물어보니 다행히 다른 방안이 있어 적용해두었다.
고마워요 chatGPT....
visualViewport?
아직 정확히 알아보진 않았지만,
실제 화면에 보이는 viewport 만을 계산할 수 있는 API로 보인다.
최근 웹서비스를 만들면서 IOS, AOS의 크로스브라우징이슈에 아주 애를먹고있는데,,
잘만 활용하면 좋을 것 같다.
https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport
https://stackoverflow.com/questions/39417778/iphone-safari-not-resizing-viewport-on-keyboard-open
https://channel.io/ko/blog/cross_browsing_ios15

2022.03.06

댓글