防止iPhone从web应用程序

上`select`放大我有这样的代码：防止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上全屏Web的应用程序运行。

当从这个列表中选择一些东西时，iPhone会放大select -element。选择某些东西后不会缩小。

我该如何预防？或缩小回来？

来源

2011-06-26 Stijn Martens

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

提供元标签属性“user-scalable = no”将限制用户在其他地方缩放。由于问题与只选择元素，请尝试在您的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; 
}

源：unzoom after selecting in iphone

来源

2012-11-20 07:31:44

+11

如果文本可见（与我的情况相同），在启用缩放前，16px似乎是最小值。 –

为了更清楚起见，这条线会阻止自动缩放：'$（''，{name：'viewport'，content：'user-scalable = no'}）。appendTo（'head'）;' – Abbas

+10

Since什么时候隐藏在select元素中的文本？ “不会带来任何布局问题” – Bill

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

你可以尝试的一件事是让页面不要放大。如果您的页面是为手机设计的，那么这很好。

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

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

祝你好运！

来源

2011-06-26 11:01:03

我已经在我的元标签。这是奇怪的事情。 –

用户可扩展= no是你需要什么，就这样居然有一个明确的回答这个问题

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

来源

2011-06-28 22:38:45 sciritai

实际上，加入width = device-width，initial-scale = 1.0，maximum-scale = 1.0就足够了。我不相信你需要用户可扩展的最大规模。 –

@DanSmart，至少在我的情况下（我不知道是什么把它分开），最小/最大比例是不够的 - 增加用户可扩展=没有做出改变。 – corolla

这感觉就像一个非常笨手笨脚的方法 - 我建议谨慎使用user-scalable = no。 [从Dev.Opera]（https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/），“也可以完全关闭缩放，但请牢记缩放是很多人使用的重要辅助功能，因此只有在确实需要的情况下才能进行缩放，例如某些类型的游戏和应用程序。“ –

这似乎对我的情况下，解决这个问题的工作：

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

小号uggested here通过Christina Arasmo Beymer

来源

2013-06-04 00:20:33 Triptoph

在我的情况下，IOS 7x老用户可扩展是不够的。上面的伎俩感谢你分享。 – landed

它的工作，非常感谢你！ –

试试这个：

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功能上，最后可以恢复初始状态。

测试在iPhone 5S

来源

2014-06-09 14:51:39

iPhone的小幅如果文本被设置为小于16个像素将放大表单字段。我建议将移动窗体字段的文本设置为16像素，然后在桌面上覆盖大小。

说明禁用缩放的答案对于视力不佳的用户无益，可能仍然希望放大缩小手机。

例子：

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

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

来源

2015-10-01 10:03:10 martinedwards

这很好！但是，如果我的文本溢出了选择框的全部宽度呢？在这种情况下我能做些什么？ – gota

防止iPhone从web应用程序

回答

相关问题