我的输入字段具有背景和固定宽度/高度。在我的桌面上的所有浏览器中看起来都不错。但是由于某种原因,它在 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浏览器在输入字段中添加了额外的填充。
尝试在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">