Почему так странно ведет себя страничка сайта?

Question

[Proshka17]

mpups.esy.es

Вот набросал страничку для мобильного сайта(окрывать лучше на смартфоне).Тыкнул на input и получил что-то странное.Почему так происходит и как это убрать?
При появление клавиатуры все элементы становяться меньше по высоте.В разметке я использовал

<meta name="viewport" content="user-scalable=no, width=device-width" />

Чтобы убрать возможность зума.Возможно это не правильный способ и из-за этого все так происходит?

Answer 1

[sumanai]

Что именно там странное? Скриншот и описание.

Comments

[Proshka17]

я добавил все в вопрос,посмотрите пожалуйста

Answer 2

[Сергей ZSA]

Скажу по-секрету - открывать без разницы где. Хоть вообще в ie и уменьшите окно браузера просто. Везде будут поля меньше. Ответ был дан - height в %. Кто так делает? Вообще зачем столько % в коде? Вёрстка тег на теге и тегом погоняет.
Next зачем для одного слова городить огороды? Если это кнопка - сделайте button, если это блок - сделайте просто div, если это вообще заголовок - сделайте h*. input через br тоже "гениально".

А ещё понравилось это если уменьшить высоту окна: