I'm using PhoneGap and JQueryMobile to create a mobile app that I want to deploy to both iOS and Android. The app is simple, and just consists of 3 bars: A header/search bar, a second bar (displays the results of the search), and the remaining screen is a that the user can write in.
Because I want to code my layout to look the same for the greatest # of devices, I've written my CSS for the layout of the app in %'s. Header is 6%, Second bar is 14%, ect. This appears to work decently for the devices I've tested for so far. I ran into an issue where the Android keyboard would squish the viewport height and therefore my layout. So I set the keyboard to resizePan and that solved the squishing issue. However now the bottom of the is not visible until the user closes the keyboard.
In the questions I've seen about that issue, the solution is to swap to "adjustResize" so that the user can scroll when the keyboard is active. I can't do this, because I want to avoid the layout-squish issue.
Is there a way to fix this without having to re-write the CSS? If I HAVE to re-write the CSS, how should I code the layout to look consistent on multiple devices? Do I have to use an extensive list of media queries for all possible devices?
Note: This isn't an issue for ios, because the soft-input keyobard overlays the textarea (like adjustPan) but still allows the user to scroll down and up to parts of the document outside of the view or covered by the keyboard.