<div id="readability-page-1" class="page"><div>
 
 <header>
 
 

 
 

 

 
 
 

 
 
 
 less than 1 minute read
 
 
 
 


 </header>
 

 <section itemprop="text">
 
 <div><pre><code>&lt;script&gt;
const detectKeyboardOpen = () =&gt; {
 const minKeyboardHeight = 300; // 일반적인 최소 키보드 높이 (px)

 return window.screen.height - minKeyboardHeight &gt; window.visualViewport.height;
};

export default {
 name: 'MobileKeyBoardChecker',
 data() {
 return {
 isKeyboardOpen: false,
 };
 },
 created() {
 window.visualViewport.addEventListener('resize', this.checkKeyboardOpen);
 },
 beforeDestroy() {
 window.visualViewport.removeEventListener('resize', this.checkKeyboardOpen);
 },
 methods: {
 checkKeyboardOpen() {
 this.isKeyboardOpen = detectKeyboardOpen();
 },
 },
};
&lt;/script&gt;
</code></pre></div>

자꾸 걸리적 거려서 Vue2 mixin으로 만들었다. React 등에서도 응용하여 활용 가능하다.

20240124

 
 </section>

 

 


 
 

 </div></div>

Never test

Vue에서 모바일 기기의 소프트 키보드가 열려있는지 확인하는 방법

댓글