One issue I faced was when trying to view a webpage in landscape mode on iPhones (specifically testing on model SE, but it appears that many people are experiencing the same problem with other iPhone models).
I have created a simple example below, consisting of two lines of text - one at the top and one at the bottom.
The problem arises when viewing the page in portrait mode everything looks fine. However, upon rotating the phone into landscape mode, the address bar covers the top of the page while the toolbar covers the bottom. I attempted to resolve this by adding some JavaScript to automatically scroll the page under the address bar, but this resulted in the last line being hidden behind the toolbar.
Despite testing various meta tags and CSS hacks, I couldn't find a suitable solution.
All I want is for both lines of text to be fully visible without the need for scrolling on this page. Additionally, I would like to retain the functionality to zoom in on the page later, so any solution cannot block zooming capability.
Here is the code snippet:
<html>
<meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<script>
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
window.addEventListener("resize",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
</script>
<style>
div {
position: absolute;
bottom: 0;
margin: auto;
}
</style>
<body>
Top
<div>
Bottom
</div>
</body>
</html>