我制作了一个HTML页面，其中有一个＜input＞标记，类型为“text”。当我在iPhone上使用Safari点击它时，页面会变大（自动缩放）。有人知道如何禁用此功能吗？
当前回答
受@jirikuchta的回答启发，我通过添加以下CSS解决了这个问题：
#myTextArea:active {
font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}
没有JS，我没有注意到任何闪光或任何东西。
值得注意的是，最大比例为1的视口也可以工作，但当页面作为iframe加载时，或者如果您有其他脚本修改视口等，则无法工作。
其他回答
解决此问题的正确方法是将元视口更改为：
<meta name=“viewport”content=“width=设备宽度，初始比例=1，最大比例=1，用户可缩放=0”/>
重要提示：不要设置最小刻度！这将保持页面可手动缩放。
在Angular中，您可以使用指令来防止IOS设备上的焦点缩放。没有保留可访问性的元标记。
import { Directive, ElementRef, HostListener } from '@angular/core';
const MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX = 16;
@Directive({ selector: '[noZoomiOS]' })
export class NoZoomiOSDirective {
constructor(private el: ElementRef) {}
@HostListener('focus')
onFocus() {
this.setFontSize('');
}
@HostListener('mousedown')
onMouseDown() {
this.setFontSize(`${MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX}px`);
}
private setFontSize(size: string) {
const { fontSize: currentInputFontSize } = window.getComputedStyle(this.el.nativeElement, null);
if (MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX <= +currentInputFontSize.match(/\d+/)) {
return;
}
const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
iOS
&& (this.el.nativeElement.style.fontSize = size);
}
}
在*.module.ts中声明后，可以像这样使用<input noZoomiOS>
input[type='text'],textarea {font-size:1em;}
我找不到干净的方法，但这里有一个黑客。。。
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并不总是捕捉入口/出口，但它在我的测试中运行良好，是一个坚实的开始。
我用jQuery也做到了这一点：
$('input[type=search]').on('focus', function(){
// replace CSS font-size with 16px to disable auto zoom on iOS
$(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
// put back the CSS font-size
$(this).css('font-size', $(this).data('fontSize'));
});
当然，如果16px的字体大小破坏了设计，则可能需要调整界面中的其他一些元素。
