16px 不能阻止 iPhone/Safari 上的输入缩放答案

【问题标题】：input zoom on iPhone/Safari not prevented with 16px16px 不能阻止 iPhone/Safari 上的输入缩放
【发布时间】：2020-09-26 10:13:49
【问题描述】：

谁能帮我解决这个邪恶的问题...

我阅读了解决方案将输入设置为 16px 的所有指南，但它仍然无法正常工作，这让我发疯了。

@media only screen and (max-device-width: 600px) {
    input {
        font-size: 16px;
    }
}

我不明白...为什么它不起作用？

【问题讨论】：

标签： css iphone safari

【解决方案1】：

您可以将此代码添加到您的 html 代码中的 html 中的 <head> 标记中： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> maximum-scale=1 将阻止输入的缩放，页面缩放将保留其默认缩放级别，但如果用户愿意，用户仍然可以裁剪屏幕以调整大小。

【讨论】：

这不是一个很好的答案，因为这会导致可访问性问题。切勿将属性最大比例设置为小于 5。web.dev/meta-viewport/…

【解决方案2】：

我通常只指定一些最流行的输入类型来设置它们的字体大小而不是加载，我不建议只定位input，因为这也会影响复选框之类的东西...

input[type="tel"],
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="assword"],
textarea {
  font-size: 16px;
}

【讨论】：

【解决方案3】：

解决方案 #1

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    select,
    select:focus,
    textarea,
    textarea:focus,
    input,
    input:focus {
      font-size: 16px;
    }
}

此媒体查询将仅针对 iOS 设备

以下是仅针对目标设备实现媒体查询的文章。

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

解决方案 #2

如果您的网站是为移动设备设计的，您可以决定不允许缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

【讨论】：

【解决方案4】：

你还需要一个属性：

@media only screen and (max-device-width: 600px) {
    input {
        -webkit-appearance: none;
        font-size: 16px;
    }
}

【讨论】：

让我测试一下，如果它有效，我会批准你的答案。谢谢。

【解决方案5】：

我认为您需要定位文本区域，而不仅仅是输入

textarea {
       font-size: 16px;
     }

。另外，根据输入，我会使用以下任何一种：

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
 textarea {
   font-size: 16px;
 }

【讨论】：