阻止iPhone放大网络应用中的"选择"

Question

我有这个代码:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

在iPhone上运行全屏网络应用程序.

从此列表中选择内容时,iPhone会放大select-element.并且在选择某些内容后不会缩小.

我怎么能阻止这个？或缩小？

Answer 1

这可能是因为浏览器试图缩放区域,因为字体大小小于阈值,这通常发生在iphone中.

提供metatag属性"user-scalable = no"将限制用户在其他地方缩放.由于问题仅在于select元素,请尝试在你的css中使用以下内容,这个hack最初用于jquery mobile.

HTML:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

CSS:

select{
font-size: 50px;
}

src:在iphone中选择后取消缩放

Answer 2

user-scalable = no是你需要的,所以这个问题实际上是一个确定的答案

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Answer 3

这似乎适用于解决此问题的案例:

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

建议在这里由克里斯蒂娜Arasmo Beymer

Answer 4

如果文本设置为小于16像素,iPhone将稍微缩放表单字段.我建议将移动表单字段的文本设置为16像素,然后覆盖桌面的大小.

关于禁用缩放的答案对于视力不佳的用户来说无益,他们可能仍希望放大较小的手机.

例:

# Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

Answer 5

我参加聚会有点晚了，但我找到了一个非常巧妙的解决方法，仅通过 css 操作就可以解决此问题。就我而言，由于设计原因，我无法更改字体大小，也无法禁用缩放。

由于如果文本设置为小于 16 像素，iPhone 会稍微缩放表单字段，我们可以欺骗 iPhone 认为字体大小为 16 像素，然后将其转换为我们的大小。

例如，让我们举个例子，当我们的文本是 14px 时，它会缩放，因为它小于 16px。因此，我们可以根据 0.875 转换比例。

在下面的示例中，我添加了填充以显示如何相应地转换其他属性。

.no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

我希望它有帮助！

Answer 6

如果字体大小小于 16 像素，iOS 会缩放页面以显示更大的输入字段。

仅在单击任何字段时，才会缩放页面。所以点击时，我们将其设置为 16px，然后更改为默认值

下面的代码片段对我来说效果很好，并且针对移动设备，

@media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}