阻止iPhone放大Web应用程序中的“选择”

我有以下代码：

<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。并且在选择某些内容后不会缩小。

我该如何预防？还是缩小？

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

赋予metatag属性“ user-scalable = no”将限制用户缩放其他位置。由于问题仅在于select元素，因此请尝试在CSS中使用以下内容，此技巧最初用于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中选择后取消缩放

user-scalable = no是您所需要的，仅此问题的确有确切答案

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

这似乎对我的案例解决了这个问题：

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

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

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

对于部分视力不佳的用户而言，禁用缩放功能的答案可能无济于事。

例：

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

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

我参加聚会有点晚了，但是我发现了一个非常简洁的解决方法，只能通过CSS操作来解决此问题。就我而言，由于设计原因，我无法更改字体大小，也无法禁用缩放功能。

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

例如，让我们以文本为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
}

希望对您有所帮助！

试试这个：

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上测试

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

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

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

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

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

选择{font-size：16px; }

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

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

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

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

祝好运！

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

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

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

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

尝试添加以下CSS以禁用Ios的默认样式：

-webkit-appearance: none;

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

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

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})