我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?


当前回答

这个问题的简单解决方案是:

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

注:最大宽度可根据您的要求定制。

其他回答

在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>

我找不到干净的方法,但这里有一个黑客。。。

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 Safari和Chrome上对我有效。对于输入选择器,可以将类或id设置为包含当前值。

@supports (-webkit-overflow-scrolling: touch) {
   input {
     font-size: 16px;
   }
}

我看了多个答案\

在元标签中设置最大比例=1的答案在iOS设备上运行良好,但在Android设备上禁用缩放功能。设置字体大小的字体:16px;onfocus对我来说太粗糙了。

所以我编写了一个JS函数来动态更改元标记。

var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS)
    document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1, maximum-scale=1";
else
    document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1";

我看到这里的人用JavaScript或viewport函数做了一些奇怪的事情,并关闭了所有设备上的手动缩放。我认为这不应该是一个解决方案。添加此CSS片段将关闭iOS中的自动缩放功能,而不会将字体大小更改为固定数字,如16px。

默认情况下,我在输入字段中使用93.8%(15px)的字体大小,通过添加CSS代码段,字体大小保持在93.8%。无需更改为16px或将其设置为固定数字。

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}