2

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:

without meta

And this is form with meta tag:

with meta

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:

thick underlining

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...

Community
  • 1
  • 1
lenden
  • 800
  • 2
  • 14
  • 38

1 Answers1

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.

Ming
  • 4,468
  • 1
  • 21
  • 21
  • Yes, I've already understood, that I can disable zoom. And of course I understand, that I can make special mobile version. But now target is to show desktop-designed site on mobiles without disabling zoom. So, do you mean, that it's impossible to fix thickness in this case? – lenden Nov 28 '14 at 03:58
  • @lenden what's happening is that the mobile is zooming in, in order to make the text legible. I've looked at your site using my mobile, and after clicking on a field (and my browser zooming in) I have manually zoomed out again, and you cannot read what you are typing. You need to prevent zoom to prevent this from happening. – Ming Nov 28 '14 at 04:54
  • I've got it, but border is thick even if I don't zoom. Page looks different with and without meta-tag at 1.0-scale. This "feature" actually does nothing with letters, it just makes border, underlining and so on huge. So, preventing zoom doesn't help, because border(for example) isn't 1px even if I prevent zoom and user device-width – lenden Nov 28 '14 at 13:35