阻止iPhone在web应用中放大`select` [英] Prevent iPhone from zooming in on `select` in web-app

问题描述

我有这个代码：

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

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

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

当从此列表中选择内容时，iPhone会放大选择元素。

When selecting something from this list, the iPhone zooms in on the select-element. And doesn't zoom back out after selecting something.

如何防止这种情况？或者缩小回来？

How can I prevent this? Or zoom back out?

推荐答案

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

It is probably because the browser is trying to zoom the area since the font size is less than the threshold, this generally happens in iphone.

提供一个metatag属性user-scalable = no将限制用户在其他地方缩放。由于问题是仅使用 select 元素，请尝试在您的css中使用以下内容，此黑客最初用于jquery mobile。

Giving a metatag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Since the problem is with select element only, try using the following in your css, this hack is originally used for 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中选择后取消缩放

这篇关于阻止iPhone在web应用中放大`select`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！