防止 iPhone 在网络应用程序中放大“选择”

Question

我有这个代码：

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

Running in a full-screen web-app on iPhone。

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

我怎样才能防止这种情况发生？或者缩小回来？

Answer 1

可能是因为字体大小小于阈值，浏览器试图缩放该区域，这种情况通常发生在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 中选择后取消缩放

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

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

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

例子：

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

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

Answer 4

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

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

建议此处作者：克里斯蒂娜·阿拉斯莫·贝梅尔

Answer 5

我来晚了一点，但我发现了一个非常巧妙的解决方法，仅通过 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
}

我希望它有帮助！

Answer 6

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

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

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

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

Answer 7

试试这个：

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

Answer 8

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

select{
字体大小：16px；
}

Answer 9

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

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

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

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

祝你好运！

Answer 10

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

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

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

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','');
    });
})