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, 11:41 #1Particulier
- Berichten
- 337
- Lid sinds
- 17 Jaar
IOS input height
-
In de schijnwerper
SSD Webhosting al vanaf €0,85 ! 5GB SSD Opslag - Onbeperkt Dataverkeer - SitebuilderHostingJobPortaal.nl - Prachtig domein voor een vacature website, online recruitment enzDomein te koopGoedkope 10 Gbps Virtual Private Server (VPS) in Nederland (Met PURE NVMe opslag!)HostingUniek concept voor marketing en signing bureau's (eventspandoek.nl)Website te koop -
14-06-2015, 15: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, 15:39 #3Particulier
- Berichten
- 337
- Lid sinds
- 17 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, 17: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, 18: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