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
- IOS input height
-
14-06-2015, 12:41 #1Particulier
- Berichten
- 337
- Lid sinds
- 18 Jaar
IOS input height
-
In de schijnwerper
Blogplaatsing Lifestyle website 50.000 bezoekers p/m (DR 44, DA 35, PA 43)LinkpartnersLinkbuilden tegen een laag tarief?Freelance / WerkActie! €35 Blogplaatsing op Sanitopper.nl 1500-2000 bezoekers p/m DR38, PA38 en DA58LinkpartnersLinkbuilding laten doen - Sinds 1998 | NUMMER 1 voorbeeldenOverige deals -
14-06-2015, 16:23 #2Particulier
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Re: IOS input height
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
-
14-06-2015, 16:39 #3Particulier
- Berichten
- 337
- Lid sinds
- 18 Jaar
Re: IOS input height
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.
-
14-06-2015, 18:48 #464BitsWebhosting.EU
- Berichten
- 2.092
- Lid sinds
- 17 Jaar
Re: IOS input height
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.
-
14-06-2015, 19:58 #5Particulier
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Re: IOS input height
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.
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic