responsive webpage form input odd behavior on mobile phone

Question

I am developing a responsive webpage, with form input. When testing on mobile phone, the screen zoomed in when I tap on an input field to input something, the text box for input was cut-off on the left side, and what I typed will not show on screen.

Here is the screen before entering input mode:

and here is how the screen looks like when entered input mode:

Here is how it looks like when I pinched the screen and zoomed all the way out:

So what did I do wrong with responsive webpage design to have lead to such odd behavior? I tested the page on Chrome and Firefox on my mobile phone. "Request desktop mode" in the browsers was turned off when testing.

The only part in my codes that i suspect may lead to any oddity, is perhaps this part:

@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 too many screen resolutions on mobile phones, I can only assume that when the screen is in Portrait orientation, it's a mobile device (phones and tablets alike). When the screen is in landscape mode, it's most likely shown on a desktop PC (tablets and phones in landscape orientation are treated as a PC screen) and limit the content to be displayed in a 800px area centered to the screen.

.main-box is a div container that contains the whole page, which will hold an that will cover the whole client are of the browser.

.main-body is a div that will take 100% width when in Portrait mode, and will take a 600px area centered in the screen when in Landscape mode.

What may lead to the odd behavior, I guessed, could be caused by when in input mode, part of the screen area is taken by the virtual keyboard and making the actual display area became Landscape, so the layout is broken.

So, can anybody please help me by showing what is the Voodoo tricks I need to make the input mode works correctly (If they do exists)? Thanks in advance.

Or alternately, can any one tell me how to determine what is the screen width of a mobile phone? It seems scaled, I have a phone with FHD (1080 x 1920) native resolution, but from what I get when adjusting my pages to fit in the browser's screen to not require "request desktop version" to look right, the 'virtual' screen width is much smaller, maybe around 350 to 400px.

score 1 · Answer 1 · answered May 11 '18 at 07:50

1

It happens in iPhone, safari, and chrome browser on phone.

here is the post on StackOverflow to fix it: Disable Auto Zoom in Input "Text" tag - Safari on iPhone

hope it will help.

answered May 11 '18 at 07:50

Bhavya Bharti

121
5

This solves the zoom problem, thanks very much, but now my other question remains: How do I determine the 'virtual' screen width of a mobile phone... – Kw Choy May 11 '18 at 11:58

Bhavya Bharti · Answer 2 · 2018-05-11T17:18:58.020

1

window.innerWidth or screen.width may give the screen width of the device if want to use in Javascript.

Whenever we want to get responsive never use px for setting width and height. use %, em or VW

.main-body { width: 600px; ***

maybe want to use it like

.main-body { width: 80%;

edited May 11 '18 at 17:18

answered May 11 '18 at 17:11

Bhavya Bharti

121
5

Thanks for the advice, but I must remain firm on my choice, as I was a long time Windows application developer, I prefer to have things under my control. Relying on % of the screen width isn't what I want, as 80% of 1920px is quite different to 80% of 1366px (most common LCD monitor resolution in the region I live in - where my clients are, too), and my client is looking for a consistent feel over all devices - mobile and desktop. – Kw Choy May 12 '18 at 02:07

responsive webpage form input odd behavior on mobile phone

2 Answers2