Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Input field showing different size in iOS

Tags:

html

css

ios

I have an input field with a background and a fixed width/height. It looks good in all the browsers on my desktop. But for some reason it looks bigger on the iPad and iPhone.

I tried several tricks in Css but nothing worked so far.

width: 120px !important;
background-image:url('../img/header-input.png');
height: 30px;
-webkit-appearance: none !important;
-webkit-border-radius: 0;
border-radius:0;
@include border-radius(0);
outline: none;
border: none;
like image 877
Raymond the Developer Avatar asked Feb 04 '14 12:02

Raymond the Developer


3 Answers

Be careful, as far as I know Safari browser in iOS adds extra padding in the input fields.

Try using this code inside your css:

padding: 0;
like image 68
Alberto Avatar answered Nov 09 '22 12:11

Alberto


Add this between your :

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 

and if that doesn't work you can set styles for your phone/tablet using queries:

/* Smartphones (portrait) ----------- */  
@media only screen 
and (max-width : 320px) {
/* Styles */ 
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}
like image 24
user2099810 Avatar answered Nov 09 '22 12:11

user2099810


add this inside your header

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
like image 33
SuRaj Creator Avatar answered Nov 09 '22 12:11

SuRaj Creator