I encountered a strange issue while developing a responsive webpage with form input. Whenever I tapped on an input field on my mobile phone to enter something, the screen would zoom in and cut off the text box on the left side, making it impossible to see what I typed.
Here is how the screen looked before entering input mode: https://i.sstatic.net/23eFx.jpg
and this is how it appeared once in input mode: https://i.sstatic.net/IFdOL.jpg
When I tried zooming out by pinching the screen, this is what I saw: https://i.sstatic.net/miabF.jpg
I am puzzled as to what went wrong in my responsive webpage design that caused such behavior. I tested the page on Chrome and Firefox on my mobile phone without enabling "Request desktop site".
The only part of my code that seems suspect is:
@media only screen and (orientation: landscape)
{
.main-box { width: 100%; }
img.full { width: 100%; }
.main-body
{
width: 600px;
height: 80%;
z-index: 1;
position: absolute;
left: 50%;
top: 50px;
transform: translate(-50%, 0%);
background-color: #fff7;
}
... /*other unrelated styling stuff*/
}
Since there are various screen resolutions on mobile phones, I assumed Portrait orientation indicated a mobile device, while Landscape suggested a desktop PC or tablet where content should be limited to an 800px area centered to the screen.
.main-box is a div container for the entire page, while .main-body will adjust its width based on the orientation - either take up 100% width in Portrait mode or 600px in Landscape mode.
The odd behavior during input mode might be due to the virtual keyboard taking up some screen space, possibly causing the layout to switch to Landscape mode, hence breaking the design.
If anyone knows any tips or tricks to resolve this issue, I would greatly appreciate the help. Thanks in advance.
Alternatively, does anyone know how to accurately determine the screen width of a mobile phone? Despite having a FHD resolution, adjusting my pages to fit without needing "request desktop version" shows a much smaller 'virtual' screen width, around 350 to 400px.