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

【问题标题】：Input field showing different size in iOS在 iOS 中显示不同大小的输入字段
【发布时间】：2014-02-04 22:37:23
【问题描述】：

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

【问题讨论】：

你试过-webkit-text-size-adjust吗？
你的意思是：font-size-adjust: none？

标签： html ios css

【解决方案1】：

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

尝试在您的 css 中使用此代码：

padding: 0;

【讨论】：

作为附加说明，iOS 也添加了额外的边距（类似于margin: 0 1px）。

【解决方案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 */
}

【讨论】：

感谢您的回复我刚刚尝试了元标记，但仍然无法正常工作。对于@media，它可能适用于 iPhone，但不适用于 iPad。
试试ipad查询？我看不出它有任何不工作的理由

【解决方案3】：

在你的标题中添加这个

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

【讨论】：