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

我该怎样防止这种情况？或缩小？

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：unzoom after selecting in iphone

Answer 2

用户可扩展=不是你需要的，所以实际上对这个问题有一个明确的答案

<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;
    }
}

here

建议的Christina 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

试试这个：

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时将禁用zoom。在onchange函数上，最后你可以恢复初始状态。

在iPhone 5S上测试

Answer 7

我认为你不能孤立地对这种行为采取任何行动。

您可以尝试的一件事是保持页面不变焦。如果您的页面是专为手机设计的，那就很好。

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

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

祝你好运！

Answer 8

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

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

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

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

Answer 9

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

选择{ font-size：16px; }

Answer 10

如此处回答：Disable Auto Zoom in Input "Text" tag - Safari on iPhone

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

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

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

Answer 11

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

-webkit-appearance: none;

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

Answer 12

为此花了几个小时，最好的解决方案是这里的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','');
    });
})

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

12 个答案: