我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
下面是我在一个项目中使用的黑客:
select {
font-size: 2.6rem; // 1rem = 10px
...
transform-origin: ... ...;
transform: scale(0.5) ...;
}
最终得到了我想要的初始样式和比例,但没有缩放焦点。
其他回答
如果字体大小小于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;
}
如果你的网站是为移动设备设计的,你可以决定不允许扩展。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
这解决了移动页面或表单“浮动”的问题。
正如许多其他答案已经指出的那样,这可以通过向元视口标记添加最大比例来实现。然而,这会导致在Android设备上禁用用户缩放功能。(自v10以来,它不会在iOS设备上禁用用户缩放。)
当设备为iOS时,我们可以使用JavaScript动态地向元视口添加最大比例。这实现了两全其美:我们允许用户缩放,并防止iOS缩放到聚焦的文本字段。
| maximum-scale | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes | yes | yes | no |
| no | yes | no | yes |
| yes on iOS, no on Android | yes | yes | yes |
代码:
const addMaximumScaleToMetaViewport = () => {
const el = document.querySelector('meta[name=viewport]');
if (el !== null) {
let content = el.getAttribute('content');
let re = /maximum\-scale=[0-9\.]+/g;
if (re.test(content)) {
content = content.replace(re, 'maximum-scale=1.0');
} else {
content = [content, 'maximum-scale=1.0'].join(', ')
}
el.setAttribute('content', content);
}
};
const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (checkIsIOS()) {
disableIosTextFieldZoom();
}
经过一段时间的尝试,我想出了这个解决方案
// set font-size to 16px to prevent zoom
input.addEventListener("mousedown", function (e) {
e.target.style.fontSize = "16px";
});
// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
e.target.style.fontSize = "";
});
在“mousedown”时,它将输入的字体大小设置为16px。这将阻止缩放。在焦点事件中,它将字体大小更改回初始值。
与之前发布的解决方案不同,这将允许您将输入的字体大小设置为任意大小。
一条关于将字体大小设置为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大小。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 如何在iOS中使用Swift编程segue
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?