我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
您可以防止Safari在用户输入期间自动放大文本字段,而不禁用用户的缩放功能。只需添加最大比例=1,但忽略其他答案中建议的用户比例属性。
如果您在图层中有一个表单,如果缩放,它会“浮动”,这会导致重要的UI元素移出屏幕,这是一个值得选择的选项。
<meta name=“viewport”content=“width=设备宽度,初始比例=1,最大比例=1”>
其他回答
总之,答案是:将表单元素的字体大小设置为至少16px
我看到这里的人用JavaScript或viewport函数做了一些奇怪的事情,并关闭了所有设备上的手动缩放。我认为这不应该是一个解决方案。添加此CSS片段将关闭iOS中的自动缩放功能,而不会将字体大小更改为固定数字,如16px。
默认情况下,我在输入字段中使用93.8%(15px)的字体大小,通过添加CSS代码段,字体大小保持在93.8%。无需更改为16px或将其设置为固定数字。
input[type="text"]:focus,
textarea:focus {
-webkit-text-size-adjust: 100%;
}
一条关于将字体大小设置为16px的顶级答案的评论询问了这是如何解决的,如果你想要更大/更小的字体怎么办。
我不知道你们所有人的情况,但使用px来调整字体大小并不是最好的方法,你应该使用它们。
我在我的响应网站上遇到了这个问题,我的文本字段大于16像素。我的表单容器设置为2em,输入字段设置为1.4em。在移动查询中,我根据视口更改html字体大小。由于默认的html是10,我的输入字段在桌面上计算为28px
为了取消自动缩放,我不得不将输入更改为1.6em。这将我的字体大小增加到32px。只是稍微高一点,几乎看不到。在我的iPhone 4和5上,我将html字体大小改为15像素(纵向),改回10像素(横向)。看起来像素大小的最佳点是48px,这就是为什么我从1.4em(42px)改为1.6em(48px)。
你需要做的事情是找到字体大小的最佳位置,然后将其转换为rem/em大小。
伪元素如:focus不再像以前那样工作。从iOS 11,可以在主样式之前添加一个简单的重置声明(前提是不要用较小的字体大小覆盖它们)。
/* Prevent zoom */
select, input, textarea {
font-size: 16px;
}
值得一提的是,对于Tachyons.CSS这样的CSS库,很容易意外覆盖字体大小。
例如,class:f5相当于:fontSize:1rem,如果您将主体字体比例保持为默认值,则可以使用。
但是:如果您选择字体大小class:f6,则在向上的小屏幕上,这将相当于fontSize:.875rem。在这种情况下,您需要更具体地说明重置声明:
/* Prevent zoom */
select, input, textarea {
font-size: 16px!important;
}
@media screen and (min-width: 30em) {
/* not small */
}
在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>
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 如何在iOS中使用Swift编程segue
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?