Высота инпута на разных девайсах разная

[helio]

У меня есть форма. Так вот во всех браузерах на десктопе отображается отлично. Сайт отзывчивый и используются медиа-запросы. Так вот на некоторых мобильных устройствах инпуты отображаются не так, как задумано. А именно высота больше чем нужно. Например, на iOS устройствах наблюдается такое. На андроидах тестировал всего лишь на нескольких устойствах и там все нормально. Способа указать файл стилей только лишь для iOS устройств как я понял из поиска нет. Если задаю 

<meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel= "stylesheet" href="static/css/mobile.css" media="handheld,only screen and (max-device-width:768px)"/>

то файл mobile.css сработает, как для iOS, так и для андроида, и инпуты в iOS будут отображаться нормально, но аналогичная проблема появится в андроиде. Если какой-то выход из этой ситуации? Пробовал задавать высоту и ширину в пикселях, в em-ах, ничего не изменяется.

 

Вот скрины, слева iPad, а справа обычный комп

 

Здесь выложу код, т.к. не удалось сделать рабочий пример на jsfiddle верстка вся разваливается.

 

<div class="form-container-1">    <p>Закажите</p>    <p>бухгалтерское обслуживание</p>    <form class="form-1" action="form-1.php" method="post" role="form">        <ul>            <li><i class="fa fa-user"></i></li>            <li><i class="fa fa-envelope"></i></li>            <li><i class="fa fa-phone"></i></li>            <li><i class="fa fa-file-text-o"></i></li>        </ul>        <input type="text" name="name" placeholder="ваше имя" onfocus="this.placeholder=''" onblur="this.placeholder='ваше имя'" required>        <input type="email" name="email" placeholder="ваш email" onfocus="this.placeholder=''" onblur="this.placeholder='ваш email'" required>        <input type="tel" name="phoneNumber" placeholder="ваш номер" onfocus="this.placeholder=''" onblur="this.placeholder='ваш номер'" required>        <input type="text" name="name" placeholder="ваш комментарий" onfocus="this.placeholder=''" onblur="this.placeholder='ваш комментарий'" required>        <input type="submit" value="Оставить заявку">    </form></div>

.form-container-1 {    float: right;    background: #fff;    border: 1px solid #e6e7e9;    width: 18em;    height: 22.5em;    margin-top: 2em;}.form-container-1 p {    color: #164194;    font-family: 'pf_din_text_cond_promedium', sans-serif;    font-size: 1.425em;    text-align: center;}.form-container-1 p:first-child {    font-size: 2.4375em;    line-height: 1.1em;}.form-container-1 p:not(:first-child) {    margin-bottom: .6em;}.form-1 input {    border: none;    padding-left: 2px;}.form-1 input[type="text"],.form-1 input[type="email"],.form-1 input[type="tel"] {    width: 236px;    height: 46px;    background: #dcebff;    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7);    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7);    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7);    -webkit-border-radius: 0;    -moz-border-radius: 0;     border-radius: 0;     color: #6dabff;    font-family: 'pf_din_text_comp_promedium', sans-serif;    font-size: 1.176em;    outline: medium none;}.form-1 input[type="submit"] {    display: block;    width: 8.5em;    height: 2em;    background: #35a7ff;    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #35a7ff), color-stop(100%, #1347a1));    background: -webkit-linear-gradient(top, #35a7ff 0%, #1347a1 100%);    background: -moz-linear-gradient(top, #35a7ff 0%, #1347a1 100%);    background: -ms-linear-gradient(top, #35a7ff 0%, #1347a1 100%);    background: -o-linear-gradient(top, #35a7ff 0%, #1347a1 100%);    background: linear-gradient(to bottom, #35a7ff 0%, #1347a1 100%);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#35a7ff', endColorstr='#1347a1', GradientType=0);    border: none;     -webkit-border-radius: 10px;    -moz-border-radius: 10px;     border-radius: 10px;     -webkit-box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7);    -moz-box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7);    box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7);    color: #fff;    cursor: pointer;    font-family: 'pf_din_text_cond_promedium', sans-serif;    font-size: 1.5em;    text-decoration: none;    text-transform: uppercase;    margin: 1em auto 0 auto;}.form-1 ul {    float: left;}.form-1 ul li {    display: block;    background: #009aff;    width: 3em;    height: 3em;    text-align: center;    line-height: 3.125em;}.fa {    color: #fff;    font-size: 1em;    text-align: center;}

Edited July 17, 2014 by helio

[parnas]

Это из-за рендерринг шрифтов скорее всего. Попробуйте задавать фиксированные размеры самим блокам. А почему иконки не задать через псевдоэлементы?

[ryter]

height, выравнивай текст не line-height а падингами

Edited July 17, 2014 by ryter

[helio]

Это из-за рендерринг шрифтов скорее всего. Попробуйте задавать фиксированные размеры самим блокам. А почему иконки не задать через псевдоэлементы?

В общем послушался и изменил верстку. Пример взял отсюда и подкорректировал под мой случай:

 

<div class="form-container-1">    <p>Закажите</p>    <p>бухгалтерское обслуживание</p>    <form class="form-1" action="form-1.php" method="post" role="form">        <div class="input-container">            <div class="icon-ph"><i class="fa fa-user"></i></div>            <input type="text" name="name" placeholder="ваше имя" onfocus="this.placeholder=''" onblur="this.placeholder='ваше имя'" required>        </div>        <div class="input-container">            <div class="icon-ph"><i class="fa fa-envelope"></i></div>            <input type="email" name="email" placeholder="ваш email" onfocus="this.placeholder=''" onblur="this.placeholder='ваш email'" required>        </div>        <div class="input-container">            <div class="icon-ph"><i class="fa fa-phone"></i></div>            <input type="tel" name="phoneNumber" placeholder="ваш номер" onfocus="this.placeholder=''" onblur="this.placeholder='ваш номер'" required>        </div>        <div class="input-container">            <div class="icon-ph"><i class="fa fa-file-text-o"></i></div>            <input type="text" name="name" placeholder="ваш комментарий" onfocus="this.placeholder=''" onblur="this.placeholder='ваш комментарий'" required>        </div>        <input type="submit" value="Оставить заявку">    </form></div>.input-container {    position:relative;}.icon-ph {    display: inline-block;    width: auto;    height: 43px;    min-width: 20px;    padding: 6px 12px;    font-size: 14px;    font-weight: normal;    line-height: 43px;    text-align: center;    background-color: #009aff;    position:absolute;    z-index:3;}.form-1 input[type="text"],.form-1 input[type="email"],.form-1 input[type="tel"], .form-2 input[type="text"],.form-2 input[type="email"],.form-2 input[type="tel"] {    width: 236px;    margin: 0 0 0 40px;    padding: 16px 6px;    background: #dcebff;    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7);    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7);    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.7);    -webkit-border-radius: 0;    -moz-border-radius: 0;     border-radius: 0;     color: #6dabff;    font-family: 'pf_din_text_comp_promedium', sans-serif;    font-size: 1.176em;    outline: medium none;}.form-1 input[type="submit"],.form-2 input[type="submit"] {    display: block;    width: 8.5em;    height: 2em;    background: #35a7ff;    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #35a7ff), color-stop(100%, #1347a1));    background: -webkit-linear-gradient(top, #35a7ff 0%, #1347a1 100%);    background: -moz-linear-gradient(top, #35a7ff 0%, #1347a1 100%);    background: -ms-linear-gradient(top, #35a7ff 0%, #1347a1 100%);    background: -o-linear-gradient(top, #35a7ff 0%, #1347a1 100%);    background: linear-gradient(to bottom, #35a7ff 0%, #1347a1 100%);    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#35a7ff', endColorstr='#1347a1', GradientType=0);    border: none;     -webkit-border-radius: 10px;    -moz-border-radius: 10px;     border-radius: 10px;     -webkit-box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7);    -moz-box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7);    box-shadow: 0 5px 8px 0 rgba(125, 177, 255, 0.7);    color: #fff;    cursor: pointer;    font-family: 'pf_din_text_cond_promedium', sans-serif;    font-size: 1.5em;    text-decoration: none;    text-transform: uppercase;    margin: .7em auto 0 auto;}

Edited July 18, 2014 by helio