在iOS中显示不同大小的input字段
我有一个背景和固定宽度/高度的input字段。 它在我的桌面上的所有浏览器看起来不错。 但由于某种原因,它在iPad和iPhone上看起来更大。
我尝试了几个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">