Question

我有一个带背景和固定宽度/高度的输入字段。它在我桌面上的所有浏览器中都很好看。但出于某些原因，它在 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;

Answer 1

请注意，据我所知，iOS中的Safari浏览器会在输入字段中添加额外的填充。

尝试在css中使用此代码：

padding: 0;

Answer 2

在您的：

之间添加

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

Answer 3

在标题中添加

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

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

3 个答案: