我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
令人惊讶的是,这里有很多javascript和视口的答案,只有一个提到了文本大小调整,这是我认为最好的解决方案。
您可以将此设置为无。
添加以下CSS:
* {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
其他回答
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
background: #eee;
}
}
新功能:IOS仍然会缩放,除非你在没有焦点的输入上使用16px。
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
我添加了背景,因为IOS没有在选择上添加背景。
如果字体大小小于16px,并且表单元素的默认字体大小为11px(至少在Chrome和Safari中),浏览器将进行缩放。
此外,select元素需要附加焦点伪类。
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
font-size: 16px;
}
不需要使用以上所有内容,您可以只设置所需元素的样式,例如:仅文本、数字和文本区域:
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}
使输入元素从父样式继承的替代解决方案:
body {
font-size: 16px;
}
input[type="text"] {
font-size: inherit;
}
我找不到干净的方法,但这里有一个黑客。。。
1) 我注意到mouseover事件发生在缩放之前,但缩放发生在mousedown或focus事件之前。
2) 您可以使用javascript动态更改META视口标记(请参阅使用javascript启用/禁用iPhone safari上的缩放?)
因此,请尝试以下操作(如jquery所示):
$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
这绝对是一个黑客。。。在某些情况下,mouseover/down并不总是捕捉入口/出口,但它在我的测试中运行良好,是一个坚实的开始。
正在iOS 7上运行的Javascript黑客。这是基于@dlo的回答,但mouseover和mouseout事件被touchstart和touchend事件替换。基本上,该脚本在再次启用缩放之前添加半秒超时,以防止缩放。
$("input[type=text], textarea").on({ 'touchstart' : function() {
zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
setTimeout(zoomEnable, 500);
}});
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
}
我使用了上面Christina的解决方案,但对引导程序进行了小修改,并将另一条规则应用于桌面计算机。Bootstrap的默认字体大小为14px,这会导致缩放。下面将Bootstrap中的“表单控件”更改为16px,以防止缩放。
@media screen and (-webkit-min-device-pixel-ratio:0) {
.form-control {
font-size: 16px;
}
}
对于非移动浏览器,返回到14px。
@media (min-width: 768px) {
.form-control {
font-size: 14px;
}
}
我尝试使用.formcontrol:focu,它将其保持在14px,但focus将其更改为16px,它没有解决iOS8的缩放问题。至少在我使用iOS8的iPhone上,字体大小必须是16px才能对焦,这样iPhone才能不缩放页面。
推荐文章
- CSS/HTML:什么是使文本斜体的正确方法?
- 使用jQuery改变输入字段的类型
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- CSS div元素-如何显示水平滚动条只?
- 如何修复UITableView分隔符在iOS 7?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- 复选框输入是否只在被选中时才发布数据?
- 是类型="文本/css"必须在<链接>标签?
- 如何将LaTeX与Markdown混合?
- 如何使<div>总是全屏?
- 在Swift中根据字符串计算UILabel的大小
- 如何调用手势点击在UIView编程在迅速