我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
我看到这里的人用JavaScript或viewport函数做了一些奇怪的事情,并关闭了所有设备上的手动缩放。我认为这不应该是一个解决方案。添加此CSS片段将关闭iOS中的自动缩放功能,而不会将字体大小更改为固定数字,如16px。
默认情况下,我在输入字段中使用93.8%(15px)的字体大小,通过添加CSS代码段,字体大小保持在93.8%。无需更改为16px或将其设置为固定数字。
input[type="text"]:focus,
textarea:focus {
-webkit-text-size-adjust: 100%;
}
其他回答
总之,答案是:将表单元素的字体大小设置为至少16px
2021解决方案。。。
好吧,我已经通读了所有的旧答案,但没有一个对我有用。经过几个小时的尝试,最终解决方案似乎很简单。
input{
transform: scale(0.875);
transform-origin: left center;
margin-right: -14.28%;
}
在PC上的iOS/Android/Chrome上测试
这允许您使用14px字体,如果您需要不同的大小,则缩放因子为14/16=0.875,负边距为(1-0.875)/0.875*100
我的输入有一个父级设置为“display:flex”,它会增长以适应父级,因为它具有“flex:11自动”。你可能需要,也可能不需要,但为了完整起见,我将其包括在内。
我花了一段时间才找到它,但这是我找到的最好的代码。。。。。。http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/
var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
});
如果字体大小小于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;
}
使用(悬停:无)和(指针:粗略)以所有触摸屏设备为目标:
这里的许多答案都依赖于部署JavaScript或jQuery。
但它应该(而且是)完全可以用CSS控制条件字体表示等问题。
Safari Mobile要求(有充分的理由)与任何表单元素交互时,其最小字体大小必须为16px(或视觉等效值)。
让我们致力于让经过深思熟虑的用户体验应用于所有触摸屏浏览器。
然后我们可以采取以下措施:
@media only screen and (hover: none) and (pointer: coarse) {
input,
select,
textarea {
font-size: 11px;
}
input:focus,
select:focus,
textarea:focus {
font-size: 16px;
}
}
结果
当使用触摸屏设备时,当上面的任何交互式表单元素被聚焦时,该表单元素的字体大小被临时设置为16px。
这反过来会禁用iOS Safari Mobile自动缩放。
用户初始化的捏缩缩放在所有设备上都不受影响,并且永远不会被禁用。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 如何在iOS中使用Swift编程segue
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?