96

我有这个代码：

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

在 iPhone 上的全屏 Web 应用程序中运行。

从该列表中选择某些内容时，iPhone 会放大 -select元素。并且在选择某些内容后不会缩小。

我怎样才能防止这种情况？还是缩小回来？

4

12 回答 12

114

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

提供元标记属性“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 中选择后取消缩放

于 2012-11-20T07:31:44.880 回答
54

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

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
于 2011-06-28T22:38:45.307 回答
35

这似乎适用于我解决这个问题的情况：

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

由Christina Arasmo Beymer推荐

于 2013-06-04T00:20:33.410 回答
34

如果文本设置为小于 16 像素，iPhone 会稍微缩放表单域。我建议将移动表单字段的文本设置为 16 像素，然后将大小改写为桌面。

禁用缩放的答案对可访问性/视力不佳的用户可能仍希望在较小的手机上进行缩放没有帮助。

例子：

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

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}
于 2015-10-01T10:03:10.487 回答
6

我参加聚会有点晚了，但我发现了一个非常简洁的解决方法，它只能通过 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
}

我希望它有帮助！

于 2018-04-10T13:00:31.840 回答
5

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

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

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

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

于 2019-02-08T10:01:18.750 回答
2

尝试这个：

function DisablePinchZoom() 
{
    $('meta[name=viewport]').attr("content", "");
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

DisablePinchZoom 将在 onchange 之前触发，因此在触发 onchange 时将禁用缩放。在onchange函数上，最后可以恢复初始状态。

在 iPhone 5S 上测试

于 2014-06-09T14:51:39.910 回答
1

将所有“选择”字体大小设置为 16 像素

选择{字体大小：16px；}

于 2019-08-20T22:02:00.063 回答
0

我认为你不能对孤立的行为做任何事情。

您可以尝试的一件事是让页面完全不缩放。如果您的页面是为手机设计的，这很好。

<meta name="viewport" content="width=device-width" />

您可以尝试的另一件事是使用 JavaScript 构造而不是通用的“选择”语句。创建一个隐藏的 div 来显示您的菜单，在 javascript 中处理点击。

祝你好运！

于 2011-06-26T11:01:03.267 回答
0

尝试添加这个 CSS 来禁用 Ios 的默认样式：

-webkit-appearance: none;

这也适用于其他具有特殊样式的元素，例如 input[type=search]。

于 2019-01-01T19:51:46.363 回答
0

已经阅读了几个小时，最好的解决方案是这里的 jquery。这也有助于 iOS Safari 中的“下一个选项卡”选项。我在这里也有输入，但可以随意删除或添加。基本上 mousedown 在焦点事件之前触发并诱使浏览器认为它的 16px。此外，focusout 将触发“下一个选项卡”功能并重复该过程。

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})
于 2019-04-11T00:09:26.867 回答
0

如此处回答：禁用输入“文本”标签中的自动缩放 - iPhone 上的 Safari

您可以防止 Safari 在用户输入期间自动放大文本字段，而不会禁用用户捏合缩放的能力。只需添加maximum-scale=1但省略其他答案中建议的用户规模属性。

如果您的图层中有一个表单在缩放时会“浮动”，这是一个值得选择的选择，这可能会导致重要的 UI 元素移出屏幕。

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

于 2018-09-28T13:15:55.830 回答