Beste leden,

Ik heb op een site dat de input text een andere hoogte heeft op een iPad dan op een browser via een deskop pc.

IOS:


Desktop browsers:

Iemand een idee hoe dit kan?

De IOS resets heb ik toegepast op inputs:

input {
-webkit-appearance: none;
-webkit-border-radius:0;
border-radius:0;
}

De css van de input en submit:

footer#newsletter form input[type="text"] {
font-family: 'HelveticaNeue';
width: 360px;
height: 35px;
border-bottom: 2px solid #bbbbbb;
border-top: 1px solid #bbbbbb;
border-left: 1px solid #bbbbbb;
border-right: none;
margin: 0;
font-size: 16px;
padding-left: 20px;
}

footer#newsletter form input[type="submit"] {
font-family: 'HelveticaNeue';
width: 216px;
height: 38px;
background-color: #0093d0;
border-bottom: 2px solid #00457f;
color: #fff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}

Met vriendelijke groet,

Erwin

Wat ik altijd doe is bij het laden van een pagina controleren of je te maken hebt met een touch device. Zo ja: voeg de class "touch" toe aan de body van de pagina.
(bijvoorbeeld met Modernizr http://modernizr.com/download/)

Vervolgens kun je alles voor touch anders stijlen.

input[type='text']{} //gewone schermen
.touch input[type='text']{} //touch schermen

Daar heb ik ook al aan gedacht, maar was eigenlijk benieuwd of dit normaal gedrag is. De hele site is goed, maar enkel dit niet.

Check deze even: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Volgens mij kun je de height dan gelijk houden voor de elementen voor beide situaties.

Box-sizing is iets anders.
Standaard boxsizing is een div die je een width van 10 geeft en een padding van 5, 20 pixels breed. (5+10+5)
Zet je het op "border-box" dan blijft de width 10, ongeacht padding.
Daarmee kun je geen verschillende afmetingen maken voor touch of niet touch.