title: How to prevent mobile keyboard from covering html input
body: <p>I have a simple web app with a few text inputs and the inputs toward the bottom of the page get covered up by the iPhone keyboard. This is a terrible user experience making it difficult for the user to see what text they are entering as well as selecting other elements on the page after they are done entering text.</p>
  
  <p>Apple documents the behavior here: <a href="https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html" rel="noreferrer">https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html</a></p>
  
  <p>I've seen several posts about this problem and there are multiple solutions for iOS app development but no real solutions for web apps.</p>
  
  <p>I don't have the resources to test on multiple devices and I don't have an android device so I don't know if this problem even occurs there. </p>
  
  <p>Is there a cross platform solution for detecting when a keyboard is covering the UI, how much of the UI is being covered, and an approach to ensure the input is visible?</p>