What's happening with text-inputs in mobile browser

Question

I'm creating small web-site, that contains forms with some text-inputs. I'm using this meta tag:

<meta name="viewport" content="width=device-width" />

to display some elements correctly on mobile device. I'm checking it using Android Chrome.

It causes problem: my border of form(simple div) and borders of text-inputs become very thick, but it is set 1px. So, this is form without meta tag:

And this is form with meta tag:

So, the first question is:

How to prevent 1px increasing with device-width meta-tag?

Also, as we can see, top and bottom padding are different for text-inputs and even for button(which is div, but not submit-input!). It is more visible on second image. I've understood, that it is caused by Android typing-underlining(at least for text-inputs). When you start typing word it is underlined for auto-correction or smth like that.

In first situation underline-width is also one pixel, so difference isn't so bad(but I want to fix it too). In second it is also thick, so there is big difference:

So, logical question is:

How to prevent underlining-width increasing with device-width meta-tag?

And of course, I don't understand.

WHY does this increasing mechanism affects simple div's??? There is no typing inside

This is div code:

<div id="form-submit">ЗАБРОНИРОВАТЬ</div>

---

    div#form-submit {
    display: table;
    margin-bottom: 1em;
    border: 1px solid black;
    background-color: white;
    outline: 0px;
    font-size: 0.24em;
    font-family: inherit;
    padding-left: 0.3em;
    padding-right: 0.3em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 0.7em;
    margin: 0 auto;
    margin-bottom: 1.6em;
    cursor: pointer;
}

Finally, you can see difference between the second and the third image. When I started typing, button text moved to center a little bit...

It will be great, if somebody give explanation of any issue...

Answer 1

Your problem is that your site is not tailored for mobile devices, but you are trying to view it on a mobile.

Mobile devices have a .. let's call it a feature, where, upon selecting an editable field such as an input box, it will zoom in on that section (so you can read the text you are typing.) If your mobile did not do this automatically, with how your page has been coded, you are unable to read the text.

You can stop mobiles from zooming in by editing your <meta /> tag:

<meta name = "viewport" content = "width = device-width, user-scalable = 0, initial-scale = 1.0, maximum-scale = 1.0" />

This tells the browser:

1. Set the initial width to the viewport width (width of the screen.)
2. Do not allow the user to zoom the page
3. Set the initial zoom of the page to 100%
4. Set the maximum possible scale of the page (initiated by browser or user) to 100%.

The last property is the one that will prevent the mobile from zooming in on the text fields.

However, you ought to make your website mobile compatible, if you want people to view it on a mobile, but not allow them to zoom in. Not allowing them to zoom in, on a for-desktop designed site, is bad practise.

Google responsive design for ideas and techniques to retrofit your desktop design to be mobile friendly.