在iOS中显示不同大小的input字段

我有一个背景和固定宽度/高度的input字段。 它在我的桌面上的所有浏览器看起来不错。 但由于某种原因,它在iPadiPhone上看起来更大。

我尝试了几个Css的技巧,但迄今为止没有任何工作。

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; 

要小心,据我所知iOS中的Safari浏览器在input字段中添加了额外的填充。

尝试在你的CSS中使用这个代码:

 padding: 0; 

在你的:

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

如果这不起作用,您可以使用查询为您的手机/平板电脑设置样式:

 /* 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 */ } 

把它添加到你的头里面

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