title: jQuery/js/html5 change page content when keyboard is visible on mobile devices
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/2593139/ipad-web-app-detect-virtual-keyboard-using-javascript-in-safari">iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?</a>  </p>
  </blockquote>
  
  
  
  <p>I'm building a mobile version for a website, and I'm interested if I can create using jQuery/js/html5 or any other technology the same split screen effect that can be made on mobile apps when virtual keyboard is visible.</p>
  
  <p>For example if a user enters my webpage and clicks on an input text field, the virtual keyboard is showed and the browser automatically zooms to the area where the input text field is.</p>
  
  <p>What I want is to be able to change my page content the moment the virtual keyboard is visible based on the new resolution( screen height - keyboard height), by moving the input text field on top of the screen, followed by some tips depending on what the user enters in the text field.</p>
  
  <p>Here are some sketches to see what I am talking about:</p>
  
  <p>This is the page view without keyboard, results based on the search:</p>
  
  <p><img src="https://i.stack.imgur.com/fV8dJ.jpg" alt="page without keyboard"></p>
  
  <p>page with portrait keyboard, the logo disappears, the text input moves to top, and a max 4 items are shown</p>
  
  <p><img src="https://i.stack.imgur.com/Ra6wB.jpg" alt="page with portrait keyboard"></p>
  
  <p>page with landscape keyboard, the logo disappears, then input moves to top and is enlarged, only 2 items are shown</p>
  
  <p><img src="https://i.stack.imgur.com/weFRl.jpg" alt="enter image description here"></p>
  
  <p>is the keyboard is hidden, the page should go to phase 1.</p>
  
  <p>Hope this helps.</p>